TABLE固定宽度输出文本自动换行

转  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>