CSS設定超出指定寬度自動換行

阿豪聊乾貨發表於2016-05-24
CSS

一、背景

　　最近專案中有用到在div中顯示使用者反饋的資訊，是指定寬度的div,超出要自動換行，開始寫好後感覺應該沒什麼問題，後來自己隨便輸入測試資料的時候發現：如果是純字母或者是純數字就會出現超出了也不會自動換行的問題，甚是無解，後經過努力，已經完美解決，下面來介紹解決方式。

二、解決方式

　　對於div,p等塊級元素：正常文字的換行(亞洲文字和非亞洲文字)元素擁有預設的white-space:normal,當定義的寬度之後自動換行。然後對於純字母和純數字則不行.如下圖：

　　

解決辦法是：

　　使用word-wrap:break-word ;或者word-break:break-all;實現強制斷行.

新增以後的效果是：

　　

奏是這麼任性~


相關文章