頁面的強制換行問題總結

2022-03-12 04:17:25 字數 1753 閱讀 4299

如果想要乙個table固定大小,裡面的文字強制換行(尤其是在一長串英文文字,並且中間無空格分隔的情況下),以達到使過長的文字不撐破**的目的,一般是使用樣式:table-layout:fixed。但是在firefox下面,會有一些問題,參考gmail的一些做法,做了幾個測試,得出一種解決辦法。

如果想要乙個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

abcdefghigklmnopqrstuvwxyz 1234567890

效果:天下終於太平了

例8:(firefox瀏覽器)在使用數值固定td大小情況下使用樣式table-layout:fixed與nowrap,並且使用div

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

效果:nowrap又不起作用了

最終,例7是乙個在ie和firefox都可以完美解決頁面強制換行問題的解決方案。

jsp頁面自動換行問題

word break break all 表示按照單個字母去換行,不保證單詞的完整性 word wrap break word 保持單詞的完整性 內容將在邊界內換行,僅用於塊物件,內聯物件要用的話,必須要設定 height width 或display block 或position absolut...

Html頁面的編碼問題

size medium size size medium 今天突然碰到了網頁亂碼問題,啥折騰了幾個小時,算是明白了其中一點奧妙。自己掌握的知識還是太少了,老是覺得莫名其妙的問題,其實明白了它就是這樣。size size medium size size medium size size medium...

手機頁面的適配問題

乙個要適應各種手機螢幕,各種瀏覽器的手機版 適配是個很頭疼的問題,據了解,大概有兩種方法 1.使用第三方框架,如bootstrap jquery mobile等 2.將css中的所有px 變成em 而px與em的比例關係,是有乙個演算法的,並不是固定值,要根據巢狀關係來計算 轉了一篇關於 px轉換成...