CSS解決英文自動換行問題

2021-06-07 09:18:17 字數 2742 閱讀 7912

當容器內出現長串英文時,容器會被撐大,此時內容不會自動換行,那麼如何用css來解決英文自動換行問題呢?請往下閱讀:

如果是在table內出現此問題,可以在table標籤中加入 style="

word-wrap: break-word;table-layout: fixed;word-break:break-all;

"問題會得到解決。

那麼,word

-wrap同word

-break的區別又是什麼呢?

word-wrap是控制換行的。

使用break-word時,是將強制換行。中文沒有任何問題,英文語句也沒問題。但是對於長串的英文,就不起作用。

word-break是控制是否斷詞的。

normal是預設情況,英文單詞不被拆開。

break-all,是斷開單詞。在單詞到邊界時,下個字母自動到下一行。主要解決了長串英文的問題。

keep-all,是指chinese, japanese, and korean不斷詞。即只用此時,不用word-wrap,中文就不會換行了。(英文語句正常。)

ie下:

使用word-wrap:break-word;所有的都正常。

ff下:

如這2個都不用的話,中文不會出任何問題。英文語句也不會出問題。但是,長串英文會出問題。

為了解決長串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式會導致,普通的英文語句中的單詞會被斷開(ie下也是)。

目前主要的問題存在於 長串英文 和 英文單詞被斷開。其實長串英文就是乙個比較長的單詞而已。

即英文單詞應不應該被斷開那?那問題很明顯了,顯然不應該被斷開了。

對於長串英文,就是惡意的東西,自然不用去管了。但是,也要想些辦法,不讓它把容器撐大。

用:overflow:auto; ie下,長串會自動折行。ff下,長串會被遮蓋。

所以,綜上,最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。

word-wrap:break-word;overflow:auto;在ie下沒有任何問題。在ff下,長串會被遮住部分內容。

另,測試**如下:

1.htm

.c1asdasd

this is all english. this is all english. this is all english.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。chinese and english. 中英文混排的情況。chinese and english.

.c2safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

this is all english. this is all english. this is all english.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。chinese and english. 中英文混排的情況。chinese and english.

.c3safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

this is all english. this is all english. this is all english.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。chinese and english. 中英文混排的情況。chinese and english.

.c4safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

this is all english. this is all english. this is all english.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。chinese and english. 中英文混排的情況。chinese and english.

.c5safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

this is all english. this is all english. this is all english.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。chinese and english. 中英文混排的情況。chinese and english.

.c6safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

this is all english. this is all english. this is all english.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。chinese and english. 中英文混排的情況。chinese and english.

.c7safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

this is all english. this is all english. this is all english.

全是中文的情況。全是中文的情況。全是中文的情況。

中英文混排的情況。chinese and english. 中英文混排的情況。chinese and english.

CSS 中文英文 換行問題

transshipment booking system is launched只對英文起作用,以字母作為換行依據 transshipment booking system is launched只對英文起作用,以單詞作為換行依據 transshipment booking system is la...

CSS中英文換行問題

1.word break break all 只對英文起作用,以字母作為換行依據 2.word wrap break word 只對英文起作用,以單詞作為換行依據 3.white space pre wrap 只對中文起作用,強制換行 4.white space nowrap 強制不換行,都起作用 ...

CSS中英文換行問題

word break break all 只對英文起作用,以字母作為換行依據 word wrap break word 只對英文起作用,以單詞作為換行依據 white space pre wrap 只對中文起作用,強制換行 white space nowrap 強制不換行,都起作用 white sp...