兩種方法的區別說明：

1，word-break:break-all 例如div寬400px，它的內容就會到400px自動換行，如果該行末端有個英文單詞很長（congratulation等），它會把單詞截斷，變成該行末端為conra(congratulation的前端部分)，下一行為tulation（conguatulation）的後端部分了。

2，word-wrap:break-word 例子與上面一樣，但區別就是它會把congratulation整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。

我遇到一個情況，就是我設置了：

word-break:break-all 或者word-wrap:break-word都無效，字符串不會自動換行。

經過查證，發現原因會有兩個：

1、word-wrap對行內元素是沒有效果的

2、一般情況下，元素擁有默認的white-space:normal（自動換行，不換行是white-space:nowrap），可能是元素中設置的white-space是norwrap導致，無法換行。所以需要

white-space:normal;
word-break:break-all;
這樣問題就解決了。

word-wrap與word-break的區別，以及無效情況