CSS 文字效果

本节关注的文字效果主要包括：文本溢出、自动换行、换行规则和书写模式。

在本章中，您将了解以下属性：

• text-overflow
• word-wrap
• word-break
• writing-mode

CSS 文本溢出

CSS text-overflow 属性指定如何处理超出元素尺寸范围的文本。

text-overflow 属性可选值：

• clip：截断超出的内容，不显示
• ellipsis：使用省略号表示超出的内容

CSS 代码如下：

p.test1 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

鼠标悬停在元素上时显示溢出的内容：

div.test:hover {
  overflow: visible;
}

CSS 自动换行

默认情况下，长单词不会被断开，如果长度超过了容器的宽度，就会显示再边框外边。CSS word-wrap 属性允许长单词能够被断开并换行到下一行。

word-wrap 属性可选值：

• normal：默认值。行只能在正常的单词断点处中断。（例如两个单词之间的空格）。
• break-word：表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。

允许长单词能够被断开并换行到下一行：

p {
  word-wrap: break-word;
}

CSS 分词

CSS word-break 属性指定了怎样在单词内断行。 word-break 属性的可选值：

• normal: 使用默认的断行规则。
• break-all: 对于 Non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
• keep-all: CJK 文本不断行。 Non-CJK 文本表现同 normal。

p.test1 {
  word-break: keep-all;
}

p.test2 {
  word-break: break-all;
}

CSS 书写模式

CSS writing-mode 属性指定文本行是水平布局还是垂直布局。

writing-mode 属性的可选值：

• horizontal-tb

  对于左对齐(ltr)文本，内容从左到右水平流动。对于右对齐(rtr)文本，内容从右到左水平流动。下一水平行位于上一行下方。

• vertical-rl

  对于左对齐(ltr)文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐(rtr)文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。

• vertical-lr

  对于左对齐(ltr)文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐(rtr)文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。

一些带有 span 元素的文本 垂直-rl 写作模式

p.test1 {
  writing-mode: horizontal-tb;
}

span.test2 {
  writing-mode: vertical-rl;
}

p.test2 {
  writing-mode: vertical-rl;
}

CSS 文本效果属性

下表列出了 CSS 文本效果属性：