【CSS】关于IE、FireFox中table强制换行的总结

    关于一个表格中，一个无空格的长串字母不换行的问题，已经是比较常见的问题了。我从网络上找到的强制换行的方法，有的仅仅是针对IE的，对于FireFox换行，要么是通过JS把连续的字母添加空格或换行符，要么就是用overflow:hidden来限制。但是这样都不好，前者稍微麻烦了些，对于很多数据的情况，多少会影响一些速度。后者也不好，这样做，多余的文字就看不到了，只能保证整体结构不变。

    要解决这个问题，先来看这两个属性： word-break和word-wrap。其中word-break指的是一个英文单词是否可以被切割。而word-wrap是指该容器中的文本在达到边界时采取什么方式处理。所以这两个属性还是有区别的。需要说明的是，word-wrap各个浏览器都是支持的，但是word-break不是w3c指明的标准，因此，FireFox对word-break不支持。

    现在来总结下如何能够强制浏览器换行显示（这里针对table中的某一个td）。这里先给出一个基本的table结构，所有的方法都针对该结构进行处理

<table border="1">
    <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中添加这个文字，这样，就可以了。