問題產生的原因
當我們為div標簽聲明了寬度,但是仍然會出現文本越界的情況,不知道大家有沒有發現,只有文本內容為單詞或者純數字的時候才會出現這種情況。原因是由於:瀏覽器在解析我們頁面的時候,給這一串數字當成一個詞了,這樣就不會自動切斷字符串而進行換行。
解決方法
需要使用css中的word-wrap屬性,目前所有主流瀏覽器都支持 word-wrap 屬性。
方法一:
div{ word-wrap: break-word; word-break: normal; }
方法二:
div{ word-break:break-all; }
相比較於上面的方法,這種方法的好處在於假如在寬度的范圍內的臨界區存在一個完整的單詞,它會保留一個完整的單詞自動換行 。