关于长串数字字符串的换行

在项目中遇到一个问题，就是在一个div中包含了一长串的字符串，纯数字用逗号隔开。想实现换行的效果尝试了加宽度限制等各种方式，最终都达不到想要的效果。询问了前端的同事才得知产生这样的原因是浏览器把那一个长串当做了一个数字长串，还有单词长串。对于这种浏览器他是不会将这个长串进行截断的，如果当前行放不下他他会直接整个移到下一行。针对这种情况就需要我们自己去设置换行了。这就是CSS的两个属性word-wrap:break-word;与word-break:break-all;

word-wrap与word-break这两个样式属性都是用来强制断句的，他们的区别在于

• word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
• word-break 属性用来标明怎么样进行单词内的断句。

总结：一个长单词因为浏览器把它当做一个长串的时候，如果当前行放不下他，那么就会把它整个移动到下一行。当长串的长度超过了其所在的区域时，那么就会直接冲出你设定的区域，此时我们就可以加CSS属性word-wrap:break-word;来使浏览器进行断句换行，那么第二行中超出的部分就会被移动到第三行。因为第一行中还有部分空间，如果我们想充分利用那么我们就可以加CSS属性word-break:break-all; 使我们第一行中最后的部分也能被使用。