Html 页面的强制换行问题总结

2020-03-24 15:50:54

字体：大中小

来源：转载

供稿：网友

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

tr

td abcdefghigklmnopqrstuvwxyz 1234567890

/td

/tr

/table 效果：
能看到width=80并没有起作用，表格被字符撑开了。例2：(IE浏览器)使用样式table-layout:fixed style

.tbl {table-layout:fixed}

/style

table >
tr

td abcdefghigklmnopqrstuvwxyz 1234567890

/td

/tr

/table 效果：
width=80起作用了，不过表格换行了。例3：(IE浏览器)使用样式table-layout:fixed和nowrap style

.tbl {table-layout:fixed}

/style

table >
tr

td nowrap abcdefghigklmnopqrstuvwxyz 1234567890

/td

/tr

/table 效果：
width=80起作用了，换行也被干掉了。例4：(IE浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed和nowrap style

.tbl {table-layout:fixed}

/style

table >
tr

td width=20 nowrap abcdefghigklmnopqrstuvwxyz 1234567890

/td

td nowrap abcdefghigklmnopqrstuvwxyz 1234567890

/td

/tr

/table 效果：
不幸发生了，第一个td的nowrap不起作用了例5：(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed和nowrap style

.tbl {table-layout:fixed}

/style

table >
tr

td width=25% nowrap abcdefghigklmnopqrstuvwxyz 1234567890

/td

td nowrap abcdefghigklmnopqrstuvwxyz 1234567890

/td

/tr

/table 效果：
改成百分比，终于搞定了例6：(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed和nowrap效果：
把例5放到firefox下面，又ft了例7：(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed和nowrap,并且使用div style

.tbl {table-layout:fixed}

.td {overflow:hidden;}

/style

table >
tr

td width=25% >
div abcdefghigklmnopqrstuvwxyz 1234567890 /div

/td

td >
div abcdefghigklmnopqrstuvwxyz 1234567890 /div

/td

/tr

/table 效果：
天下终于太平了例8：(Firefox浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed和nowrap,并且使用div style

.tbl {table-layout:fixed}

.td {overflow:hidden;}

/style

table >
tr

td width=20 >
div abcdefghigklmnopqrstuvwxyz 1234567890 /div

/td

td >
div abcdefghigklmnopqrstuvwxyz 1234567890 /div

/td

/tr

/table 效果：
nowrap又不起作用了最终，例7是个在IE和Firefox都能完美解决页面强制换行问题的解决方案。
更多编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：用html5实现语音搜,索框的方法

下一篇：html文件打开出错怎么办