问题：下面代码中p已经设置了宽度，但为什么文字依然会超出宽度区域？
在这种情况下，css认为中间无空格的一连串字母"testtest..."是一个单词，而默认情况下：
（1）它不会让单词中途换行，除非遇到连字符、空格等暗示单词结束的符号(被称为“soft wrap opportunities”的地方)；
（2）它要尽力避免数据丢失，因此不会擅自把超出宽度的文字隐藏掉.
基于此两点，就出现了上面溢出的情况。但默认在中文字符的情况下，中文是一个个汉字独立存在的，不会出现溢出。（补充：假设我们在css中设置white-space：nowrap,则英文遇到空格不会再自动换行，中文也不再进行自动换行）
方法一：word-break
从名字也很好看出，word-break指的就是break words，也就是把单词从中间打断。它的含义是：“设置在文字会溢出时、换行的方式”。 它有三种值（本来有4种，第四种已算是被废弃），其作用和效果分别如下：
方法二：overflow-wrap
legacy name是word-wrap,css3中改名为overflow-wrap
字面意思上它是指“溢出-环绕”，环绕可以理解为换行，所以它和word-break含义是类似的，都是“设置在文字会溢出时、换行的方式”。
可以看出，当属性值设为anywhere和break-word时，看起来效果是一样的。
但是，如果将div设置为width:min-content,就会发现它们对min-content的计算是不同的：当overflow-wrap:break-word在计算min-content时它并不会将单词从中间拆开。它以最长的单词为宽度上限。而overflow-wrap：anywhere在计算min-content的时候，会从它能打断的任何地方去打断单词。
两种方法的比较：
从下图可以看出，区别是很一目了然的，左边只要碰到装不下的地方，单词会被从中间打断。而右边会保持单词的完整。
参考资料：
