CSS布局，為什麼英文會撐破容器不會自動換行而中文不會？

01-05

怎麼解決？

瀉藥

CSS 規範（CSS2 和 CSS Text Module Level 3）里都提到（這種情況）要按照 [UAX 14] 來處理文字斷行 http://www.unicode.org/reports/tr14/

3.1 Determining Line Break Opportunities
Three principal styles of context analysis determine line break opportunities.

Western: spaces and hyphens are used to determine breaks

East Asian: lines can break anywhere, unless prohibited

South East Asian: line breaks require morphological analysis

西文符合1情況，例子中沒有任何空格和連字元就不換行。

中文，東亞文字元合2中說明，任何情況都可以換行（除非特殊要求禁止）你樣式里又沒要求不自動斷行，也就折了。

因為在排版上，CJK（Chinese Japanese Korean）字元是可以在任意字換行的（當然，要考慮一下標點等禁則）；而英文則不能，默認情況下是要按照單詞來換行。

word

如果你設置 word-break: break-all; 的話，英文會被強行拆斷進行換行。

用 word-wrap: break-word; 可以有類似的效果但是事實上是有一些差別的，可以繼續搜索之。

這並不完美，因為良好排版的英文文本應該是有hyphenation的。據我了解CSS提供了 word-break: hyphenate; 還有新的草案里對hyphen進行了更詳細的支持，但是目前似乎沒有什麼瀏覽器支持。

word-break 和 word-wrap 在各個瀏覽器中的表現效果

一直想這每個字都是英文里的一個詞的感覺

word-break:break-all

或者給fuck!之間加空格

W3C標準裡面認為CJK文字是可以任意字元換行的，因為這些語言的基本單位是字；而英文的換行單位為單詞，解析單詞的時候是以空格為準，而你上面的那個被瀏覽器認為是一個單詞，默認單詞內部是不能換行，除非聲明word-break屬性。

在這裡面，英文之間沒有空格，瀏覽器會以為是一個單詞所以不會斷開它。而中文一個字就是一個字所以可以隨便斷。

行級元素會生成一個內聯盒，參與內聯格式化上下文（IFC）。而內聯格式化上下文會生成相應的行盒。

文字這些在IFC中，會生成一個匿名內聯框,相當於一個內聯盒。

當一個內聯盒的寬度超過行盒的寬度的時候，如果這個內聯盒是可以分割的話，就會被分割然後分布在多個行盒中，如果無法分割，那麼就會產生溢出。需要注意的是在分割處，padding,margin和border是不會影響到的。

什麼時候內聯盒是可以分割的？

（貘吃饃香的答案就是了）

瀏覽器認為它是一個單詞。按照英文的書寫規範，「,」、「.」、「!」、「?」等符號後面都是要加空格的。

順便長數字例如123431522534142513245

以及連續的標點符號例如。。。。。。。。。。

一般也會被認為是一個單詞，不會在內部添加換行從而撐開容器

使用word-break:break-all可破，但需要評估數字斷開成兩行，以及單個單詞中間斷開且無連接符對閱讀的影響

常見的例子是google和百度對英文顯示的處理

這是google的，可以看到右側沒有對齊

這是百度的，可以看到右側對齊，但是單詞內部硬生生被截斷了