纯字母或纯数字不自动换行 word-break:break-all；与word-wrap:break-word的区别

word-break:break-all;与word-wrap:break-word的区别

当一个单词长度超过容器宽度时，一般会超出容器，不换行。如

 <div class="a">
        honorificabilitudinitatibus
    </div>
    
    css:
    .a{
            width: 100px;
            background: red;
            color: #fff;
    }

执行结果如下：

我们会发现单词的部分字母超出容器展示，而没有和我们预想的一样——自动换行，那么问题来了

怎么使其换行，而不超出容器宽度呢？

答案：通过设置css中的word-break:break-all或word-wrap：break-word，就可以换行了。
但问题又来了：这两个css属性有什么区别呢？
别急，现在我们就来讲解他们的区别：
首先word-break:break-all是强行将单词拆分（也就是我们说的简单粗暴，管他三七二十一直接拆）如：

   <div class="a">
        Her mother is affectionate to me,
      so I always want to chat with mother.
    </div> 
    
    css:
      .a{
            width: 100px;
            background: red;
            word-break: break-all;
      }

不知大家发现没有：word-break:break-all这个属性是只要到达容器边缘就直接将单词拆分（如mother,affectionate,always,with这些靠近边缘的单词），它才不管其他事情呢？（像不像生活中的鲁莽之人，不考虑事情的后果，(～￣▽￣)～）
而word-wrap:break-word相比于word-break:break-all;就显得比较人性化，它会根据情况来进行换行，如

<div class="a">
        Her mother is <span> affectionate</span> to me,
      so I always want to chat with mother.
    </div> 
    css:
      .a{
            width: 100px;
            background: red;
            word-wrap: break-word;
            }

使用word-wrap:break-word拆的单词是不是就少了，word-wrap:break-word属性就是当一个单词太长无法完全在容器内展示时，会先将整个单词换行如(像mother这个单词一样），如果整个单词的长度都比容器的宽度长，那没办法了只能强行拆分这个单词，像affectionate这个单词一样。