CSS3文本样式

本文主要是介绍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 控制文本空白显示。

文本腻出

• 单行文本

  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;
}

这篇关于CSS3文本样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！