當我們在使用CSS樣式表設計表格時,經常會遇到一個問題:當單元格(td)中的內容過多時,會導致整個表格被撐開,影響頁面的美觀性。為了解決這個問題,我們可以使用CSS設置td不被撐開。
td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
上述代碼中,我們使用了三個屬性來限制td的寬度,分別是white-space、 overflow和text-overflow。
其中,white-space設置為nowrap,表示單元格中的文本不會換行,而是一直保持在同一行。
white-space: nowrap;
overflow屬性的值為hidden時,表示單元格中的溢出內容會被隱藏。如果指定了具體的寬度,當單元格中的內容超出這個寬度時,隱藏溢出部分。
overflow: hidden;
最后一個屬性text-overflow,是指定當文本溢出容器時,如何顯示溢出的文本。我們將其設置為ellipsis,表示在單元格的末尾以省略號(…)表示字符的省略。
text-overflow: ellipsis;
經過以上設置,當單元格內容超出設定寬度時,文本會在單元格末尾被省略,而不會把整個表格撐開。有了這個特殊的設置,我們可以輕松地為表格增加美觀性,提高用戶的體驗。