說(shuō)明

在前端開發(fā)中，經(jīng)常會(huì)遇到需要限制單元格寬度并且內(nèi)容超出部分顯示省略號(hào)的的情況。下面就簡(jiǎn)單的介紹下如何達(dá)到這種效果。

準(zhǔn)備知識(shí)

1. 控制文本不換行

white-space: nowrap;

2. 超出長(zhǎng)度時(shí)，出現(xiàn)省略號(hào)

overflow:hidden;

text-overflow:ellipsis

3. 修改表格布局算法

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

也就是說(shuō)當(dāng)你給表格設(shè)定列寬時(shí)，實(shí)際情況是不起作用的，當(dāng)單元格內(nèi)容過(guò)多時(shí)，依然會(huì)把寬度撐開。如果需要讓表格的列寬顯示方式由自己給單元格定義的列寬決定，就必須使用fixed這個(gè)值。

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

代碼演示

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

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表