說明
在前端開發中，經常會遇到需要限制單元格寬度並且內容超出部分顯示省略號的的情況。下面就簡單的介紹下如何達到這種效果。
准備知識
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%。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>表格演示</title> 6 <style type="text/css"> 7 table{ 8 width: 100%; 9 table-layout: fixed; 10 } 11 .name{ 12 width: 10%; 13 } 14 .age{ 15 width: 20%; 16 } 17 .sex{ 18 width: 30%; 19 } 20 .addr{ 21 width: 40%; 22 } 23 24 </style> 25 </head> 26 <body> 27 <table border="1" cellspacing="0" cellpadding="0"> 28 <thead> 29 <tr> 30 <th class="name">姓名</th> 31 <th class="age">年齡</th> 32 <th class="sex">性別</th> 33 <th class="addr">地址</th> 34 </tr> 35 </thead> 36 <tbody> 37 <tr> 38 <td>李四</td> 39 <td>13</td> 40 <td>男</td> 41 <td>山東</td> 42 </tr> 43 <tr> 44 <td>李四</td> 45 <td>13</td> 46 <td>男</td> 47 <td>山東</td> 48 </tr> 49 <tr> 50 <td>李四</td> 51 <td>13</td> 52 <td>男</td> 53 <td>山東</td> 54 </tr> 55 </tbody> 56 </table> 57 </body> 58 </html>
顯示效果如下所示：
很容易可以看出，姓名、年齡、性別以及地址等列的長度分別是10%、20%、30%、40%。
如果將第一個的姓名內容增多，效果簡直不忍直視（＞﹏＜）！
不忍直視（＞﹏＜）！！
如何把單行內容超出部分顯示為省略號呢？只需要將單元格設置如下屬性：
white-space: nowrap;/*控制單行顯示*/ overflow: hidden;/*超出隱藏*/ text-overflow: ellipsis;/*隱藏的字符用省略號表示*/
話不多說，上代碼！
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>表格演示</title> 6 <style type="text/css"> 7 table{ 8 width: 100%; 9 table-layout: fixed; 10 } 11 .name{ 12 width: 10%; 13 } 14 .age{ 15 width: 20%; 16 } 17 .sex{ 18 width: 30%; 19 } 20 .addr{ 21 width: 40%; 22 } 23 td{ 24 white-space: nowrap;/*控制單行顯示*/ 25 overflow: hidden;/*超出隱藏*/ 26 text-overflow: ellipsis;/*隱藏的字符用省略號表示*/ 27 } 28 </style> 29 </head> 30 <body> 31 <table border="1" cellspacing="0" cellpadding="0"> 32 <thead> 33 <tr> 34 <th class="name">姓名</th> 35 <th class="age">年齡</th> 36 <th class="sex">性別</th> 37 <th class="addr">地址</th> 38 </tr> 39 </thead> 40 <tbody> 41 <tr> 42 <td class="name2">李四sssssssssssssssssssssssssssssssssss</td> 43 <td>13</td> 44 <td>男</td> 45 <td>山東</td> 46 </tr> 47 <tr> 48 <td>李四</td> 49 <td>13</td> 50 <td>男</td> 51 <td>山東</td> 52 </tr> 53 <tr> 54 <td>李四</td> 55 <td>13</td> 56 <td>男</td> 57 <td>山東</td> 58 </tr> 59 </tbody> 60 </table> 61 </body> 62 </html>
修改后，效果如下：
