div内容超出不换行

问题

div内容超出不换行

解决

word-break: break-word;

参考

参考

CSS中设置了宽度，但是其中的内容溢出而不换行
当我们为div标签或者p标签等设置了宽度，会出现文本溢出并且不会换行的情况，一般这种情况都是只有文本内容为单词或者纯数字的时候出现的。
原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。

解决方法：

方法一：

word-break: break-all;

方法二：

word-break: break-word;

两种方法的区别在于：
方法一：内容到达指定宽度强行断句换行，一个单词显示不开将会截断换行继续展示；
方法二：当前单词在宽度内无法展示，整个单词换行展示；
word-break: break-all;会将单词截断换行显示；
word-break: break-word;会整个单词换行显示