关于一个表格中,一个无空格的长串字母不换行的问题,已经是比较常见的问题了。我从网络上找到的强制换行的方法,有的仅仅是针对IE的,对于FireFox换行,要么是通过JS把连续的字母添加空格或换行符,要么就是用overflow:hidden来限制。但是这样都不好,前者稍微麻烦了些,对于很多数据的情况,多少会影响一些速度。后者也不好,这样做,多余的文字就看不到了,只能保证整体结构不变。
要解决这个问题,先来看这两个属性: word-break和word-wrap。其中word-break指的是一个英文单词是否可以被切割。而word-wrap是指该容器中的文本在达到边界时采取什么方式处理。所以这两个属性还是有区别的。需要说明的是,word-wrap各个浏览器都是支持的,但是word-break不是w3c指明的标准,因此,FireFox对word-break不支持。
现在来总结下如何能够强制浏览器换行显示(这里针对table中的某一个td)。这里先给出一个基本的table结构,所有的方法都针对该结构进行处理
<tbody>
<tr>
<td style="100px;">ddddddddddddddddddddddddddddddddddddddd</td>
</tr>
</tbody>
</table>
首先是IE6,7:在td样式中加入:word-wrap:break-word;这样,就可以达到我们的目的了。
然后是IE8,9:在td样式加入:word-wrap:break-word; word-break:break-all; 这样,IE89就可以实现换行了,于此同时,Chrome和Safari也可以实现强制换行了。
IE67也可以的,简单说明下为什么要加上word-break,这是因为,连续的字母浏览器会认为这个是一个完整单词,因此,浏览器默认的处理方式是不可以将单词拆开,因此,word-wrap就无效了。
最后是FireFox,word-wrap在table中和在div中完全不同,经过我自己的实践,word-wrap在块元素中可以优先考虑边界而不是里面的文本,因此,如果一个连续的字母文本在一个固定宽度的块元素中时,是可以被强制换行拆开的。因此,在这里的解决办法是:将td转化成块元素,完整的样式为:word-wrap:break-word; word-break:break-all; display:block;
一切都完美了,因此,针对表格td中的过长文本,我们可以使用这个来实现各个浏览器的兼容:word-wrap:break-word; word-break:break-all; display:block;
当然,这里面也有个缺点,因为display将td变成块元素了,因此会出现一些其他的问题(td默认的是table-cell),因此,如果你不能修改td的话,那就在td中加一个div,然后在div中添加这个文字,这样,就可以了。