CSS實現文字自動換行 相容Firefox

2021-08-23 14:52:05 字數 993 閱讀 8474

測試中常遇到火狐瀏覽器中的文字框對長字元或數字不能自動換行的問題,下面收錄一下css中的除錯方法:

效果:可以實現換行

2、(firefox瀏覽器)white-space:normal; word-break:break-all;overflow:hidden;同樣的ff下也沒有很好的實現方法,只能隱藏或者加滾動條,當然不加滾動條效果更好! #wrap

或者#wrap

ddd1111111111111111111111111111111111111111

效果:容器正常,內容隱藏

對於1、(ie瀏覽器)使用樣式table-layout:fixed;

以下為引用的內容:

www.qpsh.com www.qpsh.com www.qpsh.com

效果:可以換行

2、(ie瀏覽器)使用樣式table-layout:fixed與nowrap

以下為引用的內容:

abcdefghigklmnopqrstuvwxyz 1234567890

效果:可以換行

3、(ie瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap

以下為引用的內容:

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

效果:兩個td均正常換行

4、(firefox瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap,並且使用div

以下為引用的內容:

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

這裡單元格寬度一定要用百分比定義

效果:正常顯示,但不能換行(注:在ff下還沒有能使容器內容換行的好方法,只能用overflow將多出的內容隱藏,以免影響整體效果)

CSS實現文字自動換行 相容IE和火狐

word wrap是控制換行的。使用break word時,是將強制換行。中文沒有任何問題,英文語句也沒問題。但是對於長串的英文,就不起作用。break word是控制是否斷詞的。normal是預設情況,英文單詞不被拆開。break all,是斷開單詞。在單詞到邊界時,下個字母自動到下一行。主要解決...

CSS實現文字自動換行 相容IE和火狐

word wrap是控制換行的。使用break word時,是將強制換行。中文沒有任何問題,英文語句也沒問題。但是對於長串的英文,就不起作用。break word是控制是否斷詞的。normal是預設情況,英文單詞不被拆開。break all,是斷開單詞。在單詞到邊界時,下個字母自動到下一行。主要解決...

CSS控制文字自動換行

1.你定死 的寬度,即給 乙個寬度值 是數值,不是百分比 2.強制不換行 div自動換行 div強制英文單詞斷行 div3.總結了一下,只要在css中定義了如下句子,可保網頁不會再被撐開了。table td word break break all word wrap break word 注釋一下...