word-break 和word-wrap的区别

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