說明

在前端開發中，經常會遇到需要限制單元格寬度并且內容超出部分顯示省略號的的情況。下面就簡單的介紹下如何達到這種效果。

準備知識

1. 控制文本不換行

white-space: nowrap;

2. 超出長度時，出現省略號

overflow:hidden;

text-overflow:ellipsis

3. 修改表格布局算法

table-layout:fixed;table-layout的默認值為automatic，意思是列寬度由單元格內容設定。而fixed意思是列寬由表格寬度和列寬度設定。

也就是說當你給表格設定列寬時，實際情況是不起作用的，當單元格內容過多時，依然會把寬度撐開。如果需要讓表格的列寬顯示方式由自己給單元格定義的列寬決定，就必須使用fixed這個值。

注意：1、表格必須設置寬度 2、如果只設置表格寬度，而不設置列寬度的話，列的寬度會平均分配。

代碼演示

如下代碼所示，表格中安排了姓名、年齡、性別以及地址四列，這幾個列的長度分別為10%、20%、30%、40%。

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表