CSS 文本效果

CSS 文本溢出、单词换行、换行规则和书写模式

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

text-overflow
word-wrap
word-break
writing-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;
}

自己动手试一试 »

以下示例显示了如何悬停在元素上时显示溢出内容

示例

div.test:hover {
overflow: visible;
}

自己动手试一试 »

CSS 单词换行

CSS word-wrap 属性允许长单词能够被拆分并换到下一行。

如果一个单词太长无法适应区域，它会超出边界

这段文字包含一个非常长的单词：thisisaveryveryveryveryveryverylongword。这个长单词将被拆分并换到下一行。

word-wrap 属性允许您强制文本换行 - 即使这意味着在单词中间拆分它

这段文字包含一个非常长的单词：thisisaveryveryveryveryveryverylongword。这个长单词将被拆分并换到下一行。

CSS 代码如下

示例

允许长单词被拆分并换到下一行

p {
word-wrap: break-word;
}

自己动手试一试 »

CSS 单词拆分

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

这段文字包含一些文本。这行将会在连字符处断开。

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

CSS 代码如下

示例

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

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

自己动手试一试 »

CSS 书写模式

CSS writing-mode 属性指定文本行是水平还是垂直布局。

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

以下示例显示了不同的书写模式

示例

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

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

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

自己动手试一试 »