td 中设置超出宽度显示省略号失效

td测试内容超出显示省略号时，结果没有显示省略号，而是一直往后显示，且超出了td大小，强行挤大了table.

 

原因是因为td默认不换行。

 

解决方法：

 

1.强制td换行. IE加上word-break:break-all;

 

2.是给td加上display: inline-block;

3.在下面加一个其他标签如a,加上display: inline-block; 以及宽度。

 

html如下：

<tr><td>1</td><td><a href="#">你的16年计划完成几个了？</a></td></tr>

css如下:

td:first-child{width: 20px;}

td:last-child{width: 230px;}

td a{overflow:hidden; white-space:nowrap; text-overflow: ellipsis; word-break:break-all; display: inline-block; width: 220px;}

 

转载于:https://www.cnblogs.com/zzd0916/p/6213870.html