CSS表格單行超出隱藏可以有效地解決表格內容過長導致頁面錯亂的問題。下面是具體實現過程。
table { border-collapse: collapse; /*設置表格邊框合并*/ table-layout: fixed; /*設置表格寬度的布局算法為固定*/ width: 100%; /*設置表格寬度為100%*/ } td { border: 1px solid #ccc; padding: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /*設置單元格中的文字溢出時隱藏,并在末尾添加省略號,不換行*/
上述代碼將表格的邊框合并,并設置其寬度為100%。接下來是td標簽的樣式設置,其中border屬性設置單元格邊框,padding屬性設置單元格內邊距,text-overflow屬性設置單元格中的文字溢出時隱藏,并在末尾添加省略號,white-space屬性設置不對單元格中的文字進行換行,overflow屬性設置單元格中的文字溢出時隱藏。
通過以上CSS樣式設置,單元格中的文字如果過長將不會影響到其它單元格的顯示,而是自動隱藏,并在末尾添加省略號。
下一篇css表格占2格