一次上線處理-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;
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容