【CSS基础】你了解word-wrap和word-break的区别吗?

你了解word-wrap和word-break的区别吗?

word-wrap:

css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象

word-break:

css的 word-break 属性用来标明怎么样进行单词内的断句

下面分别看一下他们的区别效果：

不断句的情况：

不加word-wrap或word-break的时候，就是浏览器默认的时候，如果有一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去！

<p style="background:#000; width:200px; color:#F00;">你了解word-wrap和word-break的区别吗?  NNNNNNNNNNNNNNNNNNNNNNNNNNNNN</p>

在word-wrap:break-word作用下的情况：

可以看到，如果此行放不下该单词，在单词内部就给截断了，超过父级标签的部分直接转到下一行！

<p style="background:#000; width:200px; color:#F00; word-wrap:break-word;">你了解word-wrap和word-break的区别吗?  NNNNNNNNNNNNNNNNNNNNNNNNNNNNN</p>

在word-break:break-all作用下的情况：

这下发现了异同点了吧，此时可以看到当使用 word-break:break-all时，在当前行放不下此单词，但是依然还有空间的时候，不会像word-wrap:break-word一样直接转到下一行，而是直接跟在前面单词的后面直到把容器填满，才转到下一行！

<p style="background:#000;width:200px;color:#F00;margin-top:10px; word-break:break-all;">你了解word-wrap和word-break的区别吗? NNNNNNNNNNNNNNNNNNNNNNNNNNNNN</p>

总结：

---

word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。

而word-break:break-all则更变态，因为它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。这也可以解释为什么说它的作用是决定用什么方式来断句的，那就是——用了word-break:break-all，就等于使用粗暴方式来断句了。总之一句话，如果您想更节省空间，那就用word-break:break-all就对了！

word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句，不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

---