CSS 文本效果

CSS 文本溢出、自动换行、换行规则和书写模式

在本章中，您将了解以下属性：

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

CSS 文本溢出

CSStext-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 自动换行

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

如果一个单词太长而无法容纳在某个区域中，它就会扩展到外部：

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

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

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

CSS代码如下：

示例

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

p {
word-wrap: break-word;
}

亲自试一试 »

CSS 分词

CSSword-break属性指定换行规则。

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

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

CSS代码如下：

示例

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

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

亲自试一试 »

CSS书写模式

CSSwriting-mode属性指定文本行是水平排列还是垂直排列。

一些带有 span 元素的文本垂直-rl写作模式。

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

示例

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

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

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

亲自试一试 »