CSS文本样式

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

文本装饰（text-decoration）

• text-decoration-line属性：用于设置元素中的文本的修饰类型。

  • underline:下划线
  • overline:顶划线
  • line-through:删除线

• text-decoration-color属性：用于设置文本修饰线的颜色。

• text-decoration-style属性：用于设置由 text-decoration-line 设定的线的样式。

行间距（line-height）

在 CSS 中 line-height 属性就是用来控制两行元素之间的垂直距离的。

如上图所示，红色线是顶线、紫色线是中线、绿色线是基线、黄色线是底线，在本小节后面中会讲解到的 vertical-align 属性的 top、middle、baseline、bottom 指的就是这 4 条线。

• 行间距也称为行高指的是两行文本内容中基线的距离，即两条绿色线之间的距离。也就是上图中的 1、2、3 和 4 的区域。
• 行距指的是上一行的底线到下一行的顶线之间的距离，即上一行的黄色线到下一行的红色线之间的距离。
• 字体大小值的是顶线到底线的距离，即红色线到黄色线之间的距离。也是就是上图中的 1、2 和 4 的区域。

line-height 属性的值

CSS line-height 属性的值允许指定如下 4 种类型：

• normal 关键字：该值取决于用户电脑。一般情况下，浏览器使用的默认值为 1.2。
• 数字值：line-height 属性的最终的效果值是该数字值乘以该元素的字体大小（font-size 属性值）。
• 长度值：该值可以使用的单位请参考《单位》一节内容。如果使用 em 单位的可能会产生不确定的效果。
• 百分比值：line-height 属性的最终的效果值是该百分比值乘以该元素的字体大小（font-size 属性值。

line-height 属性设置值时，建议使用数字值。因为使用数字值时，不会在继承时产生不确定的结果。

字母间距（letter-spacing）与单词间距（word-spacing）

字母间距

CSS letter-spacing 属性原意是用来设置文本字符之间的间距。在英文中是可以分为单词和字符的，但在中文中只有文字，中文中的文字就相当于英文的字符，所以 letter-spacing 属性可以适用于中文环境。

letter-spacing 属性的值具有 2 种类型，如下所示：

• normal：该值是按照当前字体的正常间距确定的。
• 长度值：指定文字间的间距以替代默认间距，可以是负值。

单词间距

CSS word-spacing 属性用来设置 HTML 页面中标签之间或单词之间的距离，该属性对英文是有效的，但对中文是无效的。 word-spacing 属性的值具有 3 种类型，如下所示：

• normal：该值是按照当前字体的正常间距确定的。
• 长度值：指定单词间的间距以替代默认间距。
• 百分比值：指定单词之间的间距以替代默认间距的百分比。

水平对齐方式（text-align）

CSS text-align 属性用来设置 HTML 页面中文本内容相对于其所在元素在水平方式的对齐方式。值得注意的是，text-align 属性并不能设置 HTML 元素本身在水平方向的对齐，而是设置 HTML 元素内部的文本内容在其元素内水平方向的对齐。

• text-align 属性的值具有 7 种类型，如下所示：
• start：如果内容方向是左至右的话则等于 left，反之则为 right。
• end：如果内容方向是左至右的话则等于 right，反之则为 left。
• left：行内内容向左侧边对齐。 right：行内内容向右侧边对齐。
• center：行内内容居中。 justify：文字向两侧对齐，对最后一行无效。
• justify-all：和 justify 一致，但是强制使最后一行两端对齐。

垂直对齐方式（vertical-align）

CSS vertical-align 属性用来设置 HTML 页面中内联元素或表格单元格元素在垂直方向上的对齐方式。vertical-align 属性可以被应用于 2 种环境：

• 设置某个内联元素的盒子模型与该内联元素的父级容器元素的垂直对齐方式。

• 设置表格中某个单元格中内容的垂直对齐方式。

  注意： vertical-align 属性只针对内联元素和表单单元格有效，对块级元素是无效的。

  有关盒子模型、内联元素、块级元素以及表单单元格等概念会在后续的章节中进行详细讲解。

vertical-align 属性的值根据 2 种应用环境会有所不同：

• 应用于内联元素的值

  • 相对于父级元素的值

    • baseline：使元素的基线与父元素的基线对齐。
    • sub：使元素的基线与父元素的下标基线对齐。
    • super：使元素的基线与父元素的上标基线对齐。
    • text-top：使元素的顶部与父元素的字体顶部对齐。
    • text-bottom：使元素的底部与父元素的字体底部对齐。
    • middle：使元素的中部与父元素的基线加上父元素 x-height 的一半对齐。

  • 相对于行的值

    • top：使元素及其后代元素的顶部与整行的顶部对齐。
    • bottom：使元素及其后代元素的底部与整行的底部对齐。

• 应用于表单单元格的值

  • baseline：使单元格的基线，与该行中所有以基线对齐的其它单元格的基线对齐。
  • top：使单元格内边距的上边缘与该行顶部对齐。
  • middle：使单元格内边距盒模型在该行内居中对齐。
  • bottom：使单元格内边距的下边缘与该行底部对齐。

文本缩进（text-indent）

CSS text-indent 属性用来设置 HTML 页面中块级元素首行文本内容之前的缩进量。

text-align 属性的值具有 4 种类型，如下所示：

• 长度值：允许使用负值。
• 百分比值：使用所在块级元素的宽度的百分比作为缩进。
• each-line：文本缩进会影响第一行，以及使用 元素强制断行后的第一行。
• hanging：该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进，看起来就像第一行设置了一个负的缩进值。

文本阴影（text-shadow）

CSS text-shadow 属性用来设置 HTML 页面中文本内容的阴影。该属性的语法结构如下所示：

selector {
    text-shadow: color offset-x offet-y blur-raduis;
}

上述语法结构中的具体值的含义如下：

• color：可选项，设置文本内容的阴影颜色。

• offset-x：必选项，设置文本内容的阴影在水平方向的偏移量。

  • 如果值小于 0 的话，则表示向左偏移。
  • 如果值等于 0 的话，则表示水平方向不发生任何偏移。
  • 如果值大于 0 的话，则表示向右偏移。

• offset-y：必选项，设置文本内容的阴影在垂直方向的偏移量。

  • 如果值小于 0 的话，则表示向上偏移。
  • 如果值等于 0 的话，则表示垂直方向不发生任何偏移。
  • 如果值大于 0 的话，则表示向下偏移。

• blur-raduis：可选项，设置文本内容的阴影模糊半径。

  如果没有指定，则默认为 0。值越大，模糊半径越大，阴影也就越大越淡。

设置多重阴影效果需要设置多个阴影值，这些值之间需要使用逗号（,）分隔。

文本换行（word-wrap 和 word-break）

浏览器自身带有文本换行的功能。在浏览器显示文本内容时，让文本和浏览器的右端自动实现换行。具体的情况如下所示：

• 对于西方文本，浏览器会在半角空格或连字符的地方自动换行。
• 对于中文文本，可以在任何文字后面换行。通常标点符号以及前面的文字作为整体统一换行。

在 CSS 中可以用来设置文本换行效果的属性存在 2 个：

• word-wrap 属性
• word-break 属性

word-wrap 属性

word-wrap 属性属于微软的一个私有属性，在 CSS3 的文本规范中被重命名为 overflow-wrap。word-wrap 作为 overflow-wrap 的别名。

CSS overflow-wrap 属性用来设置 HTML 页面中当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。

overflow-wrap 属性的值具有如下 2 种：

• normal：表示在正常的单词结束处换行。
• break-word：表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。

word-break 属性

CSS word-break 属性用来设置 HTML 页面中文本内容自动换行的处理方式。通过具体的属性值设置，可以告知浏览器实现任意位置的换行。

word-break 属性的值具有如下 3 种：

• normal：使用默认的断行规则。
• break-all：对于除中文、日文和韩文外的文本内容，设置可以在任意字符间断行。
• keep-all：中文、日文和韩文的文本内容不断行，其他语言的文本内容等同于 normal。

处理空白（white-space）

CSS white-space 属性用来设置如何处理 HTML 元素中的空白。

代码：

<style>
    p {
      white-space: pre;
    }
  </style>
</head>
​
<body>
  <!-- 浏览器默认会将所有的空白进行合并为一个 -->
  <p>19级   启嘉班</p>
</body>

该属性的值具有如下 6 种类型：

• normal：默认值，连续的空白符会被合并，换行符会被当作空白符来处理。填充内联元素的盒子模型时，必要的话会换行。

• nowrap：和 normal 一样，连续的空白符会被合并。但文本内的换行无效。pre：连续的空白符会被保留。在遇到换行符或者 <br> 元素时才会换行。

• pre-wrap：连续的空白符会被保留。在遇到换行符或者 <br> 元素，或者需要为了填充内联元素的盒子模型时才会换行。

• pre-line：连续的空白符会被合并。在遇到换行符或者 <br>元素，或者需要为了填充内联元素的盒子模型时会换行。

• break-spaces：与 pre-wrap 的行为相同，除了如下情况：

  • 任何保留的空白序列总是占用空间，包括在行尾。
  • 每个保留的空格字符后都存在换行机会，包括空格字符之间。
  • 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸。

  如下列表总结了各种 white-space 属性值的行为：