刚刚上线了一个产品功能,结果一上线就被曝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;
}