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 字換行（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;
}

親自試一試

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;
}

親自試一試

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; 
}

親自試一試

CSS 文本效果屬性

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

屬性 描述
text-align-last 指定如何對齊文本的最后一行。
text-justify 指定對齊的文本應如何對齊和間隔。
text-overflow 指定應如何向用戶呈現未顯示的溢出內容。
word-break 指定非 CJK 腳本的換行規則。
word-wrap 允許長單詞被打斷并換到下一行。
writing-mode 指定文本行是水平放置還是垂直放置。