CSS教程

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 控制文本空白显示。
选项 说明
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;
}
这篇关于CSS3文本样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航