深入解析HTML的table表格标签与相关的换行问题

2020-04-17 08:28:16易采站长站整理

对于nowrap属性,这个是强制不换行核心,一般强制不换行就是利用这个属性。Firefox的div和td中,以及IE的div中,均没有问题。唯一的瑕疵就是在IE的td中会有一个问题,如果td没有指定宽度,则nowrap仍然有效,如果td有宽度,并且文字中无标点、无空格(例如中文长串文字),nowrap则不再有效。解决方式就是可以加word-break:keep-all;可以解决此问题。
 

总结强制换行:
如果在div这类标准块级元素中需要强制换行,最普遍的方案那就是word-wrap:break-word; word-break:break-all;此方式的缺点就是会导致如果恰巧该行末端宽为一个长串英文单词,那么该单词会被撕开的尴尬样式(而且FF不识别word-break,反而不会撕开这个单词)。个人认为如果你这个div里面放的类似于URL这个长串地址,那么用此方案是非常不错的选择(注意:由于FF不识别word-break,所以无法保证每行末端会整齐的断开URL单词,但这也是无奈的选择)。如果不是放置URL这类可以断开的长串英文,而是英文句子的话,那么使用word-wrap:break-word;即可。至于网上看到有word-wrap:break-word; overflow:hidden;这么个写法,据说可以兼容IE和FF,但经过亲自测试似乎没有什么特别效果。

总结强制不换行:
强制不换行的问题到是比较容易分析的,就如上面所讨论的那样使用white-space:nowrap,Firefox的div和td中,以及IE的div中,均没有问题。唯一的瑕疵就是在IE的td中会有一个问题,如果td没有指定宽度,则nowrap仍然有效,如果td有宽度,并且文字中无标点、无空格(例如中文长串文字),nowrap则不再有效。解决方式就是可以加word-break:keep-all;可以解决此问题。综合下来,比较稳妥的方式是在文字与td之间再套一层div,然后使用nowrap,那么就是强制不换行。注意这时候很有可能文字会过多导致溢出容器,所以你还得加一个overflow:hidden,防止溢出容器,这样子就可以兼容各个浏览器了。
总结了那么多,发觉似乎也就那几个属性在浏览器里面的各种兼容性的平衡,现在似乎尚未有一个完美的方案可以全部兼容各个浏览器,我们所能做的最多的就是尽可能的保持个浏览器显示一致。如果你还是觉得一定要兼容所有的浏览器,那么最后的方案那么就是动用JS了,以后的文章中我会考虑从以最小的JS代价来满足此要求,但这暂不在本文所讨论的范围内。