1. 程式人生 > >關於網站開發中div標簽中設置寬度後其中文本溢出的原因和解決方法

關於網站開發中div標簽中設置寬度後其中文本溢出的原因和解決方法

lan 解析 info tro 情況 href targe 圖片 com

一.問題產生的原因

  當我們為div標簽聲明了寬度,但是仍然會出現文本越界的情況,不知道大家有沒有發現,只有文本內容為單詞或者純數字

的時候才會出現這種情況為此我特意測試了兩種情況,結果如下:

  ①當文本內容為純數字或者字母:

技術分享圖片

技術分享圖片

  ②當文本內容為漢字:

技術分享圖片

技術分享圖片

    所以我們可以得出結論:瀏覽器在解析我們頁面的時候,給這一串數字當成一個詞了,這樣就不會自動切斷字符串而進行換行。

二.解決方法

  ①word-wrap:break-word     (例如div寬200px,它的內容就會到200px自動換行)

  ②word-break:break-all     (相比較於上面的方法,這種方法的好處在於假如在寬度的範圍內的臨界區存在一個完整的單詞,它會保留一個完整的單詞自動換行)

  下面讓我們來測試一下

技術分享圖片

技術分享圖片

  這樣我們就可以看見字母自動換行了!!!

關於網站開發中div標簽中設置寬度後其中文本溢出的原因和解決方法