如何防止長單字破壞我的 DIV 佈局？

防止長單字破壞你的Div

從基於表格的版面切換到基於DIV 的版面時，仍然存在一個常見問題：長單字溢出DIV 欄位的邊緣，非常難看。這個問題甚至困擾著主要網站，並且在德語等語言中特別普遍，即使日常單字也可能很長。

解：

軟連字

使用軟連字號 ()使您能夠指定瀏覽器應中斷的位置長單字：

averyvery­longword

此字元允許瀏覽器將單字呈現為「averyverylongword」或「averyvery-

longword。 🎜>或者，注入HTML5 元素，以前的IE-ism：

這會破壞沒有連字符的單詞，導致“averyvery

/([^\s-]{5})([^\s-]{5})/ → ­

長單詞。”

CSS 連字

averyvery<wbr>longword

最新版本的IE、Firefox 和Safari支援（不是 Chrome），CSS 連字符啟用自動連字符：

請注意，此功能依賴於連字符字典，並且可能並不總是一致地斷開長單字。

溢位和白色-space: 預換行

其他可行的解決方案包括控制溢位和設定空白pre-wrap:

div.breaking {
  hyphens: auto;
}

這兩種方法都可以防止長單字超出DIV 的邊界。

以上是如何防止長單字破壞我的 DIV 佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！