一个例子搞懂CSS中word-wrap、word-break

<div class="longW">这有一个长单词叫 longggggggggggggggggggggggggggg </div> 

---

1、设置 word-wrap:break-word

它会首先尝试挪到下一行，看看下一行的宽度够不够，放不下的话就在下一行进行单词内的强制断句

word-wrap 决定是否允许单词内断句

• normal: 只在允许的断字点换行(浏览器保持默认处理：长单词就会溢出) 。

• break-word:在长单词或URL地址内部进行换行。

---

2、设置 word-break:break-all

它断句的方式非常粗暴，word-break:break-all不会尝试把长单词挪到下一行，而是直接进行单词内的断句，当这一行放不下的时候就直接强制断句。如果想更节省空间，那就用word-break:break-all。

word-break 决定用什么方式来断句

• normal：使用浏览器默认的换行规则。

• break-all:允许在单词内换行 ， 允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。

• keep-all:只能在半角空格或连字符处换行，不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。

来源：CSDN

作者：五花漏

链接：https://blog.csdn.net/qq_37024887/article/details/104820868