CSS3 文本控制

在网页中，CSS可以对文本溢出，换行规则，书写模式进行控制，从而让文字显示达到更好的效果。

在本章中，您将学习如下几个控制文字的属性：

• text-overflow 控制文字溢出
• word-wrap 控制文字换行
• word-break 控制文字断词换行
• writing-mode 控制文字书写模式

CSS 文字溢出 – text-overflow

CSS 中的 text-overflow 属性规定应如何向用户呈现未显示的溢出内容。

例如，可以被裁剪：

这是一些无法容纳在框中的长文本。这是一些无法容纳在框中的长文本

例如，将其呈现为省略号...：

这是一些无法容纳在框中的长文本。这是一些无法容纳在框中的长文本

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

下例中展示了鼠标悬停在元素上时显示溢出内容效果，使用了元素的:hover：

div.test:hover {
  overflow: visible;
}

CSS 中文字换行（word wrapping）

CSS 中的 word-wrap 属性可以控制文字能够被折断并换到下一行。

例如，如果一个单词太长而无法容纳在一个区域内，默认情况下它会向外扩展：

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

通过 word-wrap 属性，您可以强制对文本进行换行 – 即使这意味着在词中间将其拆分：

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

允许长单词被打断并换行到下一行，CSS写法：

p {
  word-wrap: break-word;
}

CSS 换行规则

CSS 中的 word-break 属性可以指定换行规则。

例如，本段包含一些文本，设定换行不能打断整个词：

This paragraph contains some text. This line will-break-at-hyphens.

而，下面的这段文本将在任何字符处中断：

This paragraph contains some text. This line will-break-at-hyphens.

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

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

CSS 书写模式

CSS 中的 writing-mode 属性规定文本行是水平放置还是垂直放置。

Some text with a span element with a vertical-rl writing-mode.

例如，下面的例子展示了一些不同的书写模式：

实例

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

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

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

CSS 文本效果属性

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