转 http://hi.baidu.com/eeeeeeee/blog/item/5a90b59981c4730f6f068ce5.html
相信很多朋友在开发时都遇到输出<TABLE><TR><TD>中的内容时,TD的宽度会随着内容的长度增加而变化的问题,在加入<DIV style="width:20px">限制时也不能解决.这里和大家分享下HTML之限制文本输出宽度.
如1:限制的80PX并没有起作用
解决方法之1: style中有table-layout属性设置为fixed为固定表格输出时的宽度.代码及效果如2.
解决方法之2: 如果需要宽度不变又不换行还要显示文本没有全部显示可以将TD的STYLE设置为text-overflow:ellipsis; overflow: hidden; 代码及效果如3,显示为省略号.
具体的CSS代码含义请大家查阅CSS开发手册,线条就不在这里赘述了.
2010-01-18日更新内容:
有网友跟我说CSS在中文中不起作用,呵呵,这里将中文效果的的CSS更新下:中文只需要加nobr标签,效果如3,代码我加至3后,黄色显示。
1:
效果:
代码:<table border=1 width=80 >
<tr>
<td>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</td>
</tr>
</table>
2:效果:
代码:<table border=1 width=100 style="table-layout:fixed" >
<tr>
<td style="word-break:break-all">ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</td>
</tr>
</table>
3:
效果:
代码:<table border=1 width=80 style="table-layout:fixed" >
<tr>
<td style="text-overflow:ellipsis; overflow: hidden;">ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</td>
</tr>
</table>
中文处理代码:<table border=1 width=120 style="table-layout:fixed" >
<tr>
<td style="text-overflow:ellipsis; overflow: hidden; "> <nobr>我把中文放进去,加个标签才能有效果</nobr> </td>
</tr>
</table>