這兩個東西是什么，我相信至今還有很多人搞不清?

我們一起來看看W3C怎么介紹的：

word-wrap 屬性：允許長單詞或 URL 地址換行到下一行。

值描述

normal	只在允許的斷字點換行（瀏覽器保持默認處理）。
break-word	在長單詞或 URL 地址內部進行換行。

注意：break-word需要容器設定寬度才會起作用。

word-break屬性:通過使用 word-break 屬性，可以讓瀏覽器實現在任意位置的換行。

值描述

normal	使用瀏覽器默認的換行規則。
break-all	允許在單詞內換行。
keep-all	只能在半角空格或連字符處換行。

實現效果都是讓很長的英文單詞直接斷詞語換行，如圖:

斷詞前：

斷詞后：

那他們之間到底有什么區別呢？

總結：word-wrap 是用來決定允不允許單詞內斷句的，如果不允許的話長單詞就會溢出。最重要的一點是它還是會首先嘗試挪到下一行，看看下一行的寬度夠不夠，不夠的話就進行單詞內的斷句。并且需要容器設置了指定的寬度才會生效。

而word-break:break-all則更變態，因為它斷句的方式非常粗暴，它不會嘗試把長單詞挪到下一行，而是直接進行單詞內的斷句。

總結

以上是生活随笔為你收集整理的易混淆知识点(1)：word-wrap和word-break傻傻分不清楚的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。