word-wrap 強調的是是否允許單詞內斷句，而word-break強調的則是怎麼樣來進行單詞內的斷句。
舉例:首先，何謂單詞內斷句？當然這裡指的都是西文單詞。
這是沒有單詞內斷句的情況，我們看到那個單詞是在是太長了，所以它溢位了包裹它的容器。
這是進行了單詞內斷句的情況，就是乙個單詞被斷作了兩行。
word..d 這個我們創造出來的單詞本來應該緊接在 long 後面的，但是long後剩下的空間已經不夠了，而單詞預設是不能斷開的，所以瀏覽器就只好把它屈尊下移了。
這個長單詞還不算**的，因為至少它沒有長到超過包裹它的元素的長度，但是如果超過了呢？
如果超過了就像前面我們提到過的，它會溢位它的父容器外，因為這時它是不允許被截斷的，那就只能衝出去咯。
這個時候word-wrap就能派上用場了。我們給這段文字加上word-wrap:break-word看看會怎麼樣
哈哈，你給我滾回去吧，**的長單詞，即使你斷了也無所謂。
這樣，為了防止長單詞溢位，就在它的內部斷句了。這就是 word-wrap:break-word 的功能。
在看看word-wrap的瀏覽器支援情況：
很好，幾乎所有瀏覽器都支援。
好吧，你現在可以說了，都有了word-wrap這個東西，那還要 word-break 來幹什麼鳥？
萬惡的資本家總是想要榨乾勞動者的一切，你看，下圖中的long後面不是還有一段空間嗎，難道就這樣放著？太浪費了。。。
是啊，long後面那裡足可以放好幾個短的單詞了，都是那個臭**的長單詞！
所以ie真的很體貼，不要再罵它啦，考慮到不浪費一點點空間的問題，它創造出了 word-break 這個東西。現在我們來看看使用 word-break:break-all; 後會怎麼樣。
看看發生什麼了？那個**的長單詞並沒有被挪到下一行，而是直接放在了long後面，然後在父容器的右邊界斷開了。所以，它沒有浪費空間了哦。
再看下word-break:break-all的瀏覽器支援情況：
除了opera外，其他都支援耶（火狐也從不支援改為支援了）!
最開始我們說了，word-wrap 是用來決定允不允許單詞內斷句的，如果不允許的話長單詞就會溢位。最重要的一點是它還是會首先嘗試挪到下一行，看看下一行的寬度夠不夠，不夠的話就進行單詞內的斷句。
而word-break:break-all則更**，因為它斷句的方式非常粗暴，它不會嘗試把長單詞挪到下一行，而是直接進行單詞內的斷句。這也可以解釋為什麼說它的作用是決定用什麼方式來斷句的，那就是——用了word-break:break-all，就等於使用粗暴方式來斷句了。總之一句話，如果您想更節省空間，那就用word-break:break-all就對了！
但無論如何，單詞內的斷句都會對西文的可讀性產生一定的影響，有時候這點就要注意了。
ps:網上有些文章說，word-wrap:break-word 對長串英文不起作用，其實這是非常錯誤的，word-wrap:break-word照樣能把乙個長串英文或數字拆成多行。事實上，word-wrap:break-word與word-break:break-all共同點是都能把長單詞強行斷句，不同點是word-wrap:break-word會首先起乙個新行來放置長單詞，新的行還是放不下這個長單詞則會對長單詞進行強制斷句；而word-break:break-all則不會把長單詞放在乙個新行裡，當這一行放不下的時候就直接強制斷句了。
word wrap和word break的區別
這兩個東西是什麼，我相信至今還有很多人搞不清，只會死記硬背的寫乙個word wrap break word word break break all 這樣的東西來強制斷句，又或者是因為這兩個東西實在是太拗口了，長得又差不多，導致連背都很難背下來。那它們到底是什麼呢？我在mozilla的官網上找到如下...
word wrap和word break的區別
這兩個東西是什麼，我相信至今還有很多人搞不清，只會死記硬背的寫乙個word wrap break word word break break all 這樣的東西來強制斷句，又或者是因為這兩個東西實在是太拗口了，長得又差不多，導致連背都很難背下來。那它們到底是什麼呢？我在mozilla的官網上找到如下...
word wrap和word break的區別
這兩個東西是什麼，我相信至今還有很多人搞不清，只會死記硬背的寫乙個word wrap break word word break break all 這樣的東西來強制斷句，又或者是因為這兩個東西實在是太拗口了，長得又差不多，導致連背都很難背下來。那它們到底是什麼呢？我在mozilla的官網上找到如下...