CSS3 文本效果

CSS3 文本溢出、整字换行、换行规则以及书写模式

在本章中，您将学习如下属性:

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

CSS3 文字溢出

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

可以被裁剪:

This is some long text that will not fit in the box

也可以将其呈现为省略号（...）:

This is some long text that will not fit in the box

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

亲自试一试 »

CSS3 字换行（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;
}

亲自试一试 »

CSS3 换行规则

CSS word-break 属性指定换行规则。

本段包含一些文本。此行将在连字符处中断。

本段包含一些文本。换行会在任何字符处中断。

CSS 代码如下:

实例

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

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

亲自试一试 »

CSS3 书写模式

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

一些带有 span 元素的文本，其书写模式为 vertical-rl。

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

实例

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

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

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

亲自试一试 »

CSS3 习题和测验

测验 1 » 测验 2 » 测验 3 »