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文件打開出錯怎么辦