一次上线处理-20170912

刚刚上线了一个产品功能，结果一上线就被曝bug，很尴尬。

情景：

bug原型是有一个dd标签，宽度固定，当里面的元素超过dd的宽度的时候，需要是需要进行换行显示。

测试：

然后在测试的时候，输入的中文发现在不加overflow:hidden的时候可以自动换行。然后就没有考虑。

上线：

结果，刚刚上线，来了一个全是连续英文的例子，一下子不自动换行了，页面整体被拉伸。

问题：

立马去定位问题，发现一连串的英文字符串没有自动换行。

处理：

没有考虑到会出现连续字母的情况，在dd标签里的内容在显示中文的时候会自动换行显示，然后针对连续的英文或者数字，不会自动换行处理，需要添加对应的处理属性。
word-break:break-all; 针对英文字符实现字符的换行，是按照字符切断的
word-wrap:break-word; 以单词作为切换依据

结论：

针对需要处理换行显示的定宽的容器，需要考虑各种内置元素的情况，可以添加如下的处理类：

.next-line{
      word-break:break-all;
      word-wrap:break-word;
      white-space:pre-wrap;
}