word-break 和word-wrap的區別：

word-break是控制是否斷詞的。
normal是預設情況，英文單詞不被拆開。
break-all，是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。

word-wrap是控制換行的。
使用break-word時，是將強制換行。中文沒有任何問題，英文語句也沒問題。但是對於長串的英文，就不起作用。

前言：在一個長寬固定的div容器中，多行文字和英文句子都預設自動換行。不過，對於英語單詞而言，會有一些微妙的變化！


//沒有新增word-wrap:break-word和word-break:break-all時
    
<div style="
 
width:150px;height:70px;background:red;">
     I am a good boy, hahahahhahahahahahaha everyone likes me...
</div>

//新增word-wrap:break-word時(只對那些超出容器寬度的單詞進行拆分，而不影響其他正常單詞。)
        
    <div style="width:150px;height:70px;background:red;word-wrap:break-word">
       I am a good boy, hahahahhahahahahahaha everyone likes me...
    
 
</div>

//新增word-break:break-all時(拆分所有單詞)
 
    <div style="width:150px;height:70px;background:red;word-break:break-all">
       I am a good boy, hahahahhahahahahahaha everyone very likes me...
    </div></span>

————————————————
版權宣告：本文為CSDN博主「zhangq0123」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https:
 
//blog.csdn.net/zhangq0123/article/details/52857092