word-wrap和word-break,white-space的区别

默认情况下，也就是不添加word-break,word-wrap(或者两者属性值均为normal时)，浏览器对于一个单词比较长，以至于本行中剩余的空间已经放不下它时，浏览器会将这个单词移动到下一行。如果一个单词太长，以至于它一个单词的长度都超出元素宽度时，单词就会“冲出范围”，而不会对该单词截断并将截断部分下移。核心在总结部分，如果有不正确的地方希望大家一起讨论

1.white-space

white-space是用来处理元素中的空白符的，有如下常用属性

1.1 white-space: normal

默认值。空白会被浏览器忽略

• 代码片段：

<style>
div{
    
    width: 200px;
    height: 300px;
    background-color: #bbffaa;
    white-space:normal;
    word-wrap: normal;
    word-break: normal;
}
</style>

<div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque blanditiis, maxime natus quia illum suscipit cum vitae dolores minus quidem et mollitia voluptate eos deleniti, animi odio, culpa incidunt aliquam?
</div>

• 效果：
  
• 将div中内容更改为如下

<div>
    Lorem ipsum dolor 
       sit amet consectetur adipisicing elit. 
       Doloremque blanditiis, maxime natus quia illum 
    suscipit cum vitae dolores minus quidem et mollitia voluptate eos deleniti, animi odio, culpa incidunt aliquam?
</div>

• 更改后效果如下
  

1.2 white-space: nowrap

文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止

• 代码片段

<style>
div{
    
    width: 200px;
    height: 300px;
    background-color: #bbffaa;
    white-space:nowrap;
    word-wrap: normal;