最新的Web開發教程
 

CSS文本


CSS3文本

CSS3包含幾個新文本功能。

在本章中,您將了解以下文本屬性:

  • text-overflow
  • word-wrap
  • word-break

瀏覽器支持

在表中的數字規定,完全支持該屬性的第一個瀏覽器版本。

數字後面-O-指定用一個前綴工作的第一個版本。

屬性
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

CSS3文本溢出

CSS3的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 {
    text-overflow: inherit;
    overflow: visible;
}
試一試»

CSS3自動換行

CSS3的word-wrap屬性允許長單詞才能夠被突破,換到下一行。

如果一個詞太長,以適應在一個區域內,它擴大外:

本款包含一個很長的一句話: thisisaveryveryveryveryveryverylongword 。 長字將打破,並換到下一行。

該自動換行屬性,您可以強制文本換行 - 即使這意味著分割在一個單詞中間:

本款包含一個很長的一句話: thisisaveryveryveryveryveryverylongword 。 長字將打破,並換到下一行。

CSS代碼如下:

允許長字,以便能夠被打破,敷到下一行:

p {
    word-wrap: break-word;
}
試一試»

CSS3斷字

CSS3的word-break屬性指定換行規則。

這一段包含一些文本。 這條線將-打破-AT-連字符。

這一段包含一些文本。 該線將打破在任何字符。

CSS代碼如下:

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

p.test2 {
    word-break: break-all;
}
試一試»

自測練習用!

練習1» 練習2» 練習3»


CSS3文本屬性

下表列出了新的CSS3文本屬性:

屬性 描述
text-align-last 指定如何對齊文本的最後一行
text-emphasis 用於設置文本強調風格和文本強調色在一個聲明中速記
text-justify 指定如何對齊文本應該對齊和間隔
text-overflow 指定了未顯示,應通知給用戶如何溢出內容
word-break 指定非CJK文字換行規則
word-wrap 允許長字,以便能夠被破碎並換到下一行