這兩個東西是什么，我相信至今還有很多人搞不清，只會死記硬背的寫一個word-wrap:break-word;word-break:break-all;這樣的東西來強制斷句，又或者是因為這兩個東西實在是太拗口了，長得又差不多，導致連背都很難背下來。 那它們到底是什么呢？我在mozilla的官網上 ...

這兩個東西是什么，我相信至今還有很多人搞不清，只會死記硬背的寫一個word-wrap:break-word;word-break:break-all;這樣的東西來強制斷句，又或者是因為這兩個東西實在是太拗口了，長得又差不多，導致連背都很難背下來。 那它們到底是什么呢？我在mozilla的官網上 ...

你真的了解word-wrap和word-break的區別嗎？ 這兩個東西是什么，我相信至今還有很多人搞不清，只會死記硬背的寫一個word-wrap:break-word;word-break:break-all;這樣的東西來強制斷句，又或者是因為這兩個東西實在是太拗口了，長得又差不多，導致 ...

這個問題的開始於我對中文和英文之前區別的一個疏忽（中文是一個字就是一個單詞，而英文字母要有一個空格才將他們分割為一個單詞）； 我們看到有三段文字，本意是將他們划分為三個塊，並列排列，結果是這樣的： 文字部分沒問題，可是英文字母的部分把盒子模型撐的不像樣，原因其實很簡單 ...

word-break屬性：指定非CJK腳本的斷行規則。 值 描述 normal 使用瀏覽器默認的換行規則。 break-all 允許在單詞內換行。 keep-all ...

，對，就是這樣的。 1.首先，我們先來看瀏覽器默認情況下出現的bug: 結果： 瀏覽器默 ...

。 相關： word-break同word-wrap區別 ...

一、無效原因： 可能是元素中設置的white-space是norwrap，所以無法換行。 二、解決方法：將white-space的值設置成normal自動換行 參考鏈接：word-wrap與word-break的區別，以及無效情況 ...