首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計疑難解答

CSS 強制長網址或英文換行:word-break 與 word-wrap 屬性應用

     編輯:程式設計疑難解答

問題

<h2> 內容為長網址,超寬不換行,導致版面撐破。

解決方案

<h2 style="width:300px; word-break:break-all; word-wrap:break-word">
https://s3-us-west-1.amazonaws.com/web.noblehouse/41678
</h2>

屬性差異

屬性效果
word-break: break-all任意字元處斷行,適合中英混排、長英文/網址
word-wrap: break-word僅在單詞過長無法放入時斷行,較温和
white-space: pre-wrap保留空白與換行,並允許自動換行

建議

同時設定 word-break:break-all 與 word-wrap:break-word 可覆蓋大多數瀏覽器相容性問題。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved