CSS中设置了宽度，但是其中的内容溢出而不换行
当我们为div标签或者p标签等设置了宽度，会出现文本溢出并且不会换行的情况，一般这种情况都是只有文本内容为单词或者纯数字的时候出现的。
原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。
解决方法：
方法一：
word-break: break-all;
方法二：
word-break: break-word;
两种方法的区别在于：
方法一：内容到达指定宽度强行断句换行，一个单词显示不开将会截断换行继续展示；
方法二：当前单词在宽度内无法展示，整个单词换行展示；
举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style type="text/css">
.div1{
width: 400px;
word-break: break-all;
}
.div2{
width: 400px;
word-break: break-word;
}
</style>
</head>
<body>
<div class="div1">"Time," says the proverb, "is money". This means that every moment well-spent may put some money into our pockets.</div>
<br/>
<div class="div2">"Time," says the proverb, "is money". This means that every moment well-spent may put some money into our pockets.</div>
<br/>
<div class="div1">A1901,B1902,C1903,D1904,E1905,F2001,G2002,H2003,I2004,J2005,K2101,L2102,M2103,N2104,O2105</div>
<br/>
<div class="div2">A1901,B1902,C1903,D1904,E1905,F2001,G2002,H2003,I2004,J2005,K2101,L2102,M2103,N2104,O2105</div>
</body>
</html>
实现效果如下：
显而易见：
word-break: break-all;会将单词截断换行显示；
word-break: break-word;会整个单词换行显示