表格table的td單元格中，文字長了往往會撐開單元格，但是如果table都不夠寬了，就換行了好像（不要較真其他情況，我只說會換行的情況）。換行后的表格顯得亂糟糟，不太好看，我不喜歡這樣的換行。當然可以通過對每列td都設置寬度，那樣太麻煩了，並且有時沒法預計td中的文字會有多長，沒法給固定寬度。
為了讓表格里文字不換行（預計也不會太長的字符串），可以給表格里td添加一個nowrap屬性，如 <td nowrap>文字內容</td> 這樣。
但是如果給每個td都加上nowrap屬性，貌似太繁瑣並且占用空間和流量。於是乎，我找css的實現方法，不擅長此術，嘗試了n多個樣式后，找到white-space: nowrap; 貌似跟直接給td加nowrap差不多，那么就可以像下面這樣定義樣式，即可實現td里不換行，字符串長了就撐寬表格寬度。
<html> <head> <title>test</title> <style type="text/css"> th { width:90px; white-space: nowrap; } </style> </head> <body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <th> 我是亂七八糟的字符串 </th> <th> 悟空的博客 </th> <th> www.7es.cn </th> </tr> <tr> <td> 我是亂七八糟的字 </td> <td> 我很長哦 </td> <td> 悟空的博客 </td> </tr> </table> </body> </html>
2.table 中 文字長度大於td寬度，溢出文本用“...”代替
.class1｛
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
text-overflow屬性僅是注解，當文本溢出時是否顯示省略標記。並不具備其它的樣式屬性定義。
我們想要實現溢出時產生省略號的效果。還必須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden）。只有這樣才能實現溢出文本顯示省略號的效果。
<html> <head> <title>test</title> <style type="text/css"> .mytable { table-layout: fixed; width: 400px; border: 0px; margin: 0px; } .class1 { text-overflow: ellipsis; /* for IE */ -moz-text-overflow: ellipsis; /* for Firefox,mozilla */ overflow: hidden; white-space: nowrap; border: 1px solid; text-align: left; } </style> </head> <body> <table class="mytable" border="1" cellpadding="0" cellspacing="0"> <tr> <th width="30%" class="class1">測試</th> <th width="70%" class="class1">測試測試測試測試測試測試測試測試測試測試測試123123</th> </tr> <tr> <td>td1</td> <td>td2</td> </tr> </table> </body> </html>
參：