css中設置了寬度,div內容溢出不換行的的原因和解決方法


問題產生的原因  

當我們為div標簽聲明了寬度,但是仍然會出現文本越界的情況,不知道大家有沒有發現,只有文本內容為單詞或者純數字的時候才會出現這種情況。原因是由於:瀏覽器在解析我們頁面的時候,給這一串數字當成一個詞了,這樣就不會自動切斷字符串而進行換行。

 

解決方法 

需要使用css中的word-wrap屬性,目前所有主流瀏覽器都支持 word-wrap 屬性。

方法一:

div{ 
   word-wrap: break-word; 
   word-break: normal; 
}

  

 

方法二:

div{
   word-break:break-all;
}

  

相比較於上面的方法,這種方法的好處在於假如在寬度的范圍內的臨界區存在一個完整的單詞,它會保留一個完整的單詞自動換行 。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM