Label

　　　　　　编辑:　　图片来源:网络

如果想要一个table固定大小，里面的文字强制换行(尤其是在一长串英文文本，并且中间无空格分隔的情况下)，以达到使过长的文字不撑破表格的目的，一般是使用样式：table-layout:fixed。但是在Firefox下面，会有一些问题，参考Gmail的一些做法，做了几个测试，得出一种解决办法。

例1：(IE浏览器)普通的情况


    abcdefghigklmnopqrstuvwxyz 1234567890



效果：
可以看到width=80并没有起作用，表格被字符撑开了。

例2：(IE浏览器)使用样式table-layout:fixed


    abcdefghigklmnopqrstuvwxyz 1234567890



效果：
width=80起作用了，但是表格换行了。

例3：(IE浏览器)使用样式table-layout:fixed与nowrap


    abcdefghigklmnopqrstuvwxyz 1234567890



效果：
width=80起作用了，换行也被干掉了。

例4：(IE浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap


    abcdefghigklmnopqrstuvwxyz 1234567890

    abcdefghigklmnopqrstuvwxyz 1234567890



效果：
不幸发生了，第一个td的nowrap不起作用了

例5：(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap


    abcdefghigklmnopqrstuvwxyz 1234567890

    abcdefghigklmnopqrstuvwxyz 1234567890



效果：
改成百分比，终于搞定了

例6：(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap效果：
把例5放到firefox下面，又ft了

例7：(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

abcdefghigklmnopqrstuvwxyz 1234567890

效果：
天下终于太平了

例8：(Firefox浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

abcdefghigklmnopqrstuvwxyz 1234567890

效果：
nowrap又不起作用了

最终，例7是一个在IE和Firefox都可以完美解决页面强制换行问题的解决方案。
本文作者:佚名来源:http://www.becaused.com/
CIO之家 www.ciozj.com 微信公众号:imciow

免责声明:本站转载此文章旨在分享信息，不代表对其内容的完全认同。文章来源已尽可能注明，若涉及版权问题，请及时与我们联系，我们将积极配合处理。同时，我们无法对文章内容的真实性、准确性及完整性进行完全保证，对于因文章内容而产生的任何后果，本账号不承担法律责任。转载仅出于传播目的，读者应自行对内容进行核实与判断。请谨慎参考文章信息，一切责任由读者自行承担。