CSS 文本效果 详解
CSS 文本效果
CSS 文本溢出、整字换行、换行规则以及书写模式
在本章中，您将学习如下属性：
text-overflowword-wrapword-breakwriting-mode
CSS 文字溢出
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;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h1>text-overflow 属性</h1>
<p>以下两段包含不适合其框的长文本。</p>
<h2>text-overflow: clip:</h2>
<p class="test1">这里有一些无法容纳在框中的长文本</p>
<h2>text-overflow: ellipsis:</h2>
<p class="test2">这里有一些无法容纳在框中的长文本</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
下面的例子展示了将鼠标悬停在元素上时如何显示溢出的内容：
示例代码：
div.test:hover {
overflow: visible;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
div.test {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
}
div.test:hover {
overflow: visible;
}
</style>
</head>
<body>
<p>请把鼠标移动到下面的 div 上，来查看完整文本。</p>
<div class="test" style="text-overflow:ellipsis;">这里有一些无法容纳在框中的长文本</div>
<br>
<div class="test" style="text-overflow:clip;">这里有一些无法容纳在框中的长文本</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
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;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1>word-wrap 属性</h1>
<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 换行规则
CSS word-break 属性指定换行规则。
本段包含一些文本。此行将连字符打断：
This paragraph contains some text. This line will-break-at-hyphens.
本段包含一些文本。这些行将在任何字符处中断：
This paragraph contains some text. The lines will break at any character.
CSS 代码如下：
示例代码：
p.test1 {
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.test2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<h1>word-break 属性</h1>
<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>
<p class="test2">This paragraph contains some text. The lines will break at any character.</p>
<p><b>注释：</b>Opera 12 和更早版本不支持 word-break 属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
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;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h1>writing-mode 属性</h1>
<p class="test1">Some text with default writing-mode.</p>
<p>Some text with a span element with a <span class="test2">vertical-rl</span> writing-mode.</p>
<p class="test2">Some text with writing-mode: vertical-rl.</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 文本效果属性
下表列出了 CSS 文本效果属性：
| 属性 | 描述 |
|---|---|
| text-align-last | 指定如何对齐文本的最后一行。 |
| text-justify | 指定对齐的文本应如何对齐和间隔。 |
| text-overflow | 指定应如何向用户呈现未显示的溢出内容。 |
| word-break | 指定非 CJK 脚本的换行规则。 |
| word-wrap | 允许长单词被打断并换到下一行。 |
| writing-mode | 指定文本行是水平放置还是垂直放置。 |
