文本效果

本节会涉及如下属性：

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

---

CSS Text Overflow 文本溢出设置

通过CSS中的text-overflow属性可定义文本溢出时的处理方式。

可以把溢出的文本直接删减（clip）：

地振高冈，一派溪山千古秀；门朝大海，三合河水万年流

也可以用省略号（ellipsis）代表溢出的文本：

地振高冈，一派溪山千古秀；门朝大海，三合河水万年流

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

运行一下

在上面例子的基础上，进行如下设置，即可使鼠标悬浮在目标文本上，溢出部分即可显示。

p: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.

源码如下所示：

p {
    word-wrap: break-word;
}

运行一下

CSS Word Breaking 断词

在CSS中word-breaking属性是用来设置具体的断词的方式，保持单词的完整，亦或是无所谓单词是否完整。例如：

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

This paragraph contains some text. The lines will break at any character.

源码如下：

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

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

运行一下

CSS Writing Mode 书写模式

CSS中的writing-mode是用来定义文本的书写模式，其取值范围如下：

• horizontal-tb 书写模式为水平方向上从左到右书写，满行，则从上往下添加新行，此为默认取值
• vertical-rl 书写模式为垂直方向从上向下书写，满行，则从右向左边添加新行
• vertical-lr 书写模式为垂直方向从上向下书写，满行，则从左往右边添加新行

示例如下所示：

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

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

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

运行一下