剛剛上線了一個產品功能,結果一上線就被曝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;
}