CSS Texts

跟文本有关的 CSS 属性有：

• color，设置文本的颜色。通常以颜色的 name，HEX 值，RGB 值来指定。对于符合 W3C 的 CSS，如果你定义了 color 这个性质，也要定义 background-color 属性。
• text-align，设置文本的水平对齐方式。如果文本的书写方向为 left-to-right，则默认是左对齐，反之，为右对齐。可取值为：left, right, center, justify（每行文本将拉伸，达到相同的宽度，就像报纸和杂志上的文字排版）。

• text-decoration，用来设置或移除文本的装饰。可取的值为：none（无装饰），overline 文字上方划线，line-through 横线穿过文字，underline 文字下方划线（<a> 链接的默认文本样式）

  注意：不建议设置那些非链接的文字带有下划线，这样会误导用户。

• text-transform，设定文本中的大小写字母。可取的值为：

  • uppercase, 全部转为大写。This is some text.
  • lowercase, 全部转为小写。This is some text.
  • capitalize, 每个单词的首字母转为大写。This is some text.

• text-indent，首行缩进，指定一段文字中段落开始处与左边线的距离。可取的值为：

  • length: 使用 px, pt, cm, em 指定间距，默认值是 0
  • %，以父元素宽度的百分比

• letter-spacing，增加或减少文本中每个字符之间的距离。word-spacing，增加或减少文本中每个单词之间的距离。两者都可以取值：

  • normal: 默认值，字符之间没有额外的空隙。
  • length: 使用 px, pt, cm, em 指定间距，允许负值

• line-height，指定每行文本之间的距离。

  • normal: 默认值，值取决于 user-agent 和字体集，由浏览器分别计算得到。桌面浏览器一般为 1.2
  • number，实际行高由当前元素的 font-size 乘以这个数字得到
  • length，使用 CSS 单位表示大小(如：px，em 等)
  • %，由元素的 font-size 的百分比计算得到

  如果不明确设置子元素行高，当其父元素的 line-height 值为 length 和 % 时，子元素会直接继承父元素行高。

  为避免意外，尽量使用 number 设置行高。

  看演示：

  See the Pen Different value for line-height by Vivienne (@VivienneWU) on CodePen.

• direction，通常与 unicode-bidi 一起用，设定同一个文件中的文本是否需要改变书写方向，以支持多种语言。前者取值：

  • ltr: 默认值，left-to-right
  • rtl: right-to-left

  后者取值：

  • normal, 默认值，不需要使用额外的嵌入
  • embed, 加一层额外嵌入
  • bidi-override, 加一层额外嵌入，根据 direction 性质所指定的方向来重新书写文字。

• white-space，指定如何处理元素里的空白符（对源文档中的空格、换行和 tab 字符的处理）。

  以下三个值都会使多个相连空白符折叠成为一个：

  • normal，默认值，文本在必要时会换行。
  • nowrap，文本不允许自动换行，除非遇到 <br />
  • pre-line，文本在必要时会换行，遇 line breaks 换行

  以下取值浏览器将不处理空白符（不合并空格，不忽略换行）：

  • pre，文本不会自动换行，遇 line breaks 换行
  • pre-wrap，文本在必要时会换行，遇 line breaks 换行

• vertical-align，设定元素垂直对齐的方式。只影响 inline, inline-block, inline-table, 和 table cell 等元素。可取值：

  • baseline 默认值， 使得元素的 baseline（基线）与父元素的基线对齐
  • length 以指定的值来升高或降低元素，允许负值（设为负值降低元素）
  • % 以 line-height 值的百分之几来升高或降低元素，允许负值
  • sub 元素像下标一样对齐
  • super 元素像上标一样对齐
  • top 元素的 top 与所在行最高的元素的 top 对齐
  • text-top 元素的 top 与父元素的字体的 top 对齐
  • bottom 元素的 bottom 与所在行最低的元素对齐
  • text-bottom 元素的 bottom 与父元素的字体的 bottom 对齐
  • middle 元素放置在父元素的中间

CSS3 Text 新属性

新增文本阴影、文本溢出和单词断字功能。

• text-shadow，该属性可以给文本添加一个或多个阴影，使用逗号来分隔开每一种阴影效果。

  text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

  • none: 默认没有阴影
  • h-shadow: required，水平阴影的位置，允许负值
  • v-shadow: required，竖直阴影的位置，允许负值
  • blur-radius: 可选的，模糊的半径。默认值为 0
  • spread: 可选的，阴影的尺寸大小，允许负值
  • color: 可选的

• text-overflow，用来设定那些溢出而不被显示的内容应该如何提示给用户。 需在父元素上设定固定的 width 参看示例1。可取值：

  • clip，默认值，直接剪切掉文本，好像被橡皮擦掉超出部分一样。
  • ellipsis，将在临界处文本末尾添加 ... 。如要求限制显示值的长度，则需js实现。
  • string，显示给定的字符串。(目前只有 Firefox 支持)

• word-wrap，允许长的单词能够被分隔开，绕到下一行。取值为：

  • normal，默认值，针对英语类单词，只在允许的分隔处分开单词。
  • break-word，允许单词被分割，即使在单词的中间。

• word-break，对于非 CJK 脚本（比如中文、日语、韩语）指定换行规则。可取值：

  • normal，默认值，根据常用规则分隔单词。
  • break-all，允许在任何两个字之间换行
  • keep-all，禁止词组之间断行

• text-align-last，指定文本最后一行要如何对齐。Safari 16-以下不支持该属性。可取值有：

  • auto, 默认值, justified and aligned left
  • left，right，center 左／右／中间对齐
  • justify，拉伸最后一行文本，以满足和其他行相同的宽度
  • start，end，在文本行开始／结尾处对齐（根据 direction 属性的值确定是左对齐，还是右对齐）

示例1

标题文案仅显示一行，超出模块宽度隐藏，并显示 ...

/* 假设父元素已设置 width */
.truncate-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

示例2

详情描述仅显示3行，超出隐藏，并在第三行末尾显示 ...

.truncate-desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

CSS3 Multiple Columns

使文本布局像报纸上的多列显示.

• column-width 列宽，指定一个建议的最优的列宽度。可取值：auto 和 length 。
• column-count 列数，指定元素分成几列。可取值：auto 和 integer 。

以上两个属性 all in one 的简写属性是 columns 。

两列之间可以绘制分割线。

• column-rule-style 分割线的样式，取值参考 border-style
• column-rule-width 分割线的宽度，不允许负值
• column-rule-color 分隔线的颜色，可取值：color 。

以上两个属性 all in one 的简写属性是 column-rule。

此外还有：

• column-gap 定义列间距，可取值：normal 和 length 。
• column-fill 指定是否把文字尽可能平均分配到每一列。可取值：balance 、 balance-all 和 auto 。