CSS3文本样式

字母转换

• 小号大写字母

span {
  /* 小号大写 */
  font-variant: small-caps;
    
  /* 首字母大写 */
  text-transform: capitalize;
    
  /* 全部大号大写 */
  text-transform: uppercase;

  /* 全部小写 */
  text-transform: lowercase;
  }
...

<span>houdunren.com</span>

文字阴影

<style>
  h2 {
  	text-shadow: rgba(13, 6, 89, 0.8) 3px 3px 5px;
  }
</style>
...

<h2>houdunren.com</h2>

空白处理

• 使用 white-space 控制文本空白显示。

选项	说明
pre	保留文本中的所有空白，比如空格键，换行键，类似使用 pre 标签
nowrap	禁止文本换行
pre-wrap	保留空白，保留换行符
pre-line	空白合并，保留换行符

文本腻出

• 单行文本

  div {
      width: 200px;
      border: solid 1px blueviolet;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

• 多行文本

div{
  width: 200px;
  border:solid 1px blueviolet;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
 }

字符间隔

• 使用 word-spacing 与 letter-spacing 控制单词与字符间距。

h2 {
	word-spacing: 2em;
	letter-spacing: 3em;
}