在偶然的一次测试当中试到了一连串相同字母在一个P标签内溢出的情况，于是在网上找了解决办法，了解到了word-wrap与word-break。
首先看一下出现的情况：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
p{
width: 200px;
height: 200px;
border: 1px solid #c9c;
}
</style>
</head>
<body>
<p>this is a long wordddddddddddddddddddddddd</p>
</body>
</html>
可以明确一点就是浏览器默认的时候，如果有一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去，就是上图的效果。
此时我们给p标签加上word-wrap:break-word;效果如图：
可以看到wordddddddddddddddddddddddd这个单词原本是应该接在long后面的，但是long后面的空间已经容纳不了这个单词，所以浏览器就把移到了下一行，而加上了word-wrap:break-word;就是为了防止长单词溢出，就在它的内部断句了。这就是word-wrap:break-word;的功能。
可以看到word-wrap:break-word的兼容性很好，所有主流浏览器都支持word-wrap属性。
那么它和word-break: break-all的区别是什么呢？
上图是word-break: break-all的效果，可以看到长单词继续在long后面显示，到了容器边缘才进行了换行，浏览器并没有把它直接移到下一行，而是“不浪费一点空间的”把它塞到前面单词的后面，这就是二者的区别。
所有主流浏览器都支持word-break 属性。
word-wrap是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。
而word-break:break-all则更强硬，因为它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。这也可以解释为什么说它的作用是决定用什么方式来断句的，那就是——用了word-break:break-all，就等于使用粗暴方式来断句了。总之一句话，如果你想更节省空间，那就用word-break:break-all就对了！
但无论如何，单词内的断句都会对英文的可读性产生一定的影响，这是要注意的地方。