CSS中td自動換行是一個很常見的問題,通常我們在表格中使用td標簽來顯示內容。但是,如果一個內容過長,它會撐破td的邊界,導致表格整體不美觀。
使用CSS中的word-wrap: break-word屬性可以讓td自動換行。
td {
word-wrap: break-word;
}
這樣一來,無論內容多長,td都會自動折行,保持表格的整體美觀。
但是,需要注意的是,這個屬性只適用于單元格標簽td和th,不適用于其他標簽。所以,在設置自動換行前,需要先確保單元格的寬度足夠放置整個內容。
還有一種情況就是,在單元格中包含了長字符串(不帶空格)時,不會自動換行。此時,我們可以使用CSS中的overflow-wrap: break-word屬性。
td {
overflow-wrap: break-word;
}
這個屬性可以控制長字符串自動換行,保證單元格不會被內容撐破。
綜上,CSS中的word-wrap和overflow-wrap屬性可以幫助我們解決td自動換行的問題,使表格更美觀,更易讀。
上一篇css td的寬度
下一篇css root變量