CSS3 文本效果

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

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

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

CSS 文字溢出

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

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

也可以将其呈现为省略号（…）：

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

CSS 代码如下：

<!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>

运行一下

下面的例子展示了将鼠标悬停在元素上时如何显示溢出的内容：

<!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>

运行一下

CSS 字换行（Word Wrapping）

CSS word-wrap 属性使长文字能够被折断并换到下一行。

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

这一段包含一个很长的单词：thisisaveryveryverylongword。这个长单词将被打断并换行到下一行。

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

这一段包含一个很长的单词：thisisaveryveryverylongword。这个长单词将被打断并换行到下一行。

CSS 代码如下：

允许长单词被打断并换行到下一行：

<!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">这一段包含一个很长的单词：thisisaveryveryverylongword。这个长单词将被打断并换行到下一行。</p>
</body>
</html>

运行一下

CSS 换行规则

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

本段包含一些文本。此行将连-字-符换行。

本段包含一些文本。这些行将在任何字符处换行。

CSS 代码如下：

<!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">本段包含一些文本。此行将连-字-符换行。</p>
<p class="test2">本段包含一些文本。这些行将在任何字符处换行。</p>
<p><b>注释：</b>Opera 12 和更早版本不支持 word-break 属性。</p>
</body>
</html>

运行一下

CSS 书写模式

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

这些文本中的span元素将是垂直书写模式.

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

<!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">这些文本是默认的书写模式。</p>
<p>这些文本中的span元素将是 <span class="writingmode1">垂直</span> 书写模式</p>
<p class="test2">这些文本是垂直的书写模式。</p>
</body>
</html>

运行一下

CSS 文本效果属性

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

属性	描述
text-align-last	指定如何对齐文本的最后一行。
text-justify	指定对齐的文本应如何对齐和间隔。
text-overflow	指定应如何向用户呈现未显示的溢出内容。
word-break	指定非 CJK 脚本的换行规则。
word-wrap	允许长单词被打断并换到下一行。
writing-mode	指定文本行是水平放置还是垂直放置。

CSS3 文本效果

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

CSS 文字溢出

CSS 字换行（Word Wrapping）

CSS 换行规则

CSS 代码如下：

CSS 书写模式

CSS 文本效果属性

分类导航