在網頁布局中,表格是經常被用到的一種元素。而在其中,單元格中的內容數量多少也是需要考慮的問題,如果顯示的內容過多將會影響布局的美觀性。在CSS中,可以通過設置“text-overflow”屬性和“white-space”屬性來決定單元格中顯示的字數。
td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
上述代碼中,設置了td元素的“overflow”屬性為“hidden”,這樣單元格中過多的內容將會被隱藏起來。同時設置了“text-overflow”屬性為“ellipsis”,表示當內容被隱藏后會在末尾加上省略號。最后設置了“white-space”屬性為“nowrap”,表示不允許單元格中的內容換行。
通過上述設置,可以有效地控制單元格中顯示的字數。如果需要單獨對某個單元格進行設置,可以給該單元格增加class或id,然后將上述樣式代碼應用到該單元格。
這里是需要被截斷的內容 .text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
通過以上設置,可以使該單元格中的內容在顯示時只展示一定數量的字符,并在末尾加上省略號,從而達到更好的頁面布局效果。
上一篇mysql增加一行記錄數
下一篇css設置單行雙行