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 元素的文本，span 元素具有 vertical-rl 书写模式。

以下示例展示了一些不同的书写模式

示例

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

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

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

自己试一试 »