overflow-wrap 和 word-break 都是用于长单词断句的。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<style type="text/css">
p {
width: 300px;
background-color: #f9f2f4;
color: #c7254e;
}
.overflow-wrap {
overflow-wrap: break-word;
}
.word-break {
word-break: break-all;
}
</style>
<body>
<p >浏览器默认情况下：<br/>ThankIT, Hello, How are yoooooooooooooooooooooooooooooooooooooooooooooooooooou?</p>
<p class="overflow-wrap">overflow-wrap:break-word<br/>ThankIT, Hello, How are yoooooooooooooooooooooooooooooooooooooooooooooooooooou?</p>
<p class="word-break">break-word:break-all<br/>ThankIT, Hello, How are yoooooooooooooooooooooooooooooooooooooooooooooooooooou?</p>
</body>
</html>
默认情况下，如果一个单词很长，导致一行中剩下的空间放不下的时候，浏览器就会把该单词移到下一行，如果宽度还是超出父元素，就会溢出。
overflow-wrap 最早叫 word-wrap ，最早是 IE 的特性。现在 word-wrap 作为 overflow-wrap 的别名，几乎所有浏览器都支持。在断句的时候，会首先将长单词挪到下一行，然后下一行再放不下则断开。
word-break 则是不考虑换行，充分利用空间，简单粗暴。
参考文档
内有案例可查看其他值的效果
overflow-wrap
word-break
