在日常的網頁開發中,表格是經常出現的元素之一。而在表格中,td(table data)
則是其中重要的組成部分之一。
有時候我們需要控制表格單元格(td)中的文本是否換行。在默認情況下,文本會在不換行的情況下盡可能地向右延伸。如果希望 td 強制換行,則需要使用 CSS 樣式。
td{ white-space:pre-wrap; word-wrap:break-word; }
white-space
屬性指定了如何處理元素內的空格和換行。其中pre-wrap
值表示在文本遇到換行符(\n)的時候,將會換行,同時在必要的時候自動插入換行符(
)。
word-wrap
屬性規定是否允許把單詞內部斷開換行,使其不延伸到 td 的外部。值break-word
表示允許斷行,但僅在單詞內部斷開。
如果僅僅使用white-space: pre
樣式,則文本可能會超出 td 的邊界,導致頁面排版混亂。因此,我們通常會同時使用word-wrap: break-word
樣式來防止這種情況出現。
使用以上樣式后,td 內的文本在遇到單詞內部需要換行、或者太長導致超出 td 的邊界時,文本會自動換行。
在實際開發中,我們也可以根據 td 內文本的具體情況,使用不同的 CSS 樣式,以達到更好的效果。
上一篇css td 寬度平均分
下一篇@page css規則