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

自己動手試一試 »