css 內容超出框的寬度自動換行

要使 CSS 內的內容在超出容器寬度時自動換行,可以使用 word-wrapoverflow-wrap 屬性。這兩個屬性都可以用來控制長單詞或 URL 等不可分割的字符串在達到容器邊界時的行為。默認情況下,這些長字符串可能會延伸到容器之外,破壞布局的外觀。通過設置這些屬性,可以確保內容適當地換行,保持布局的整潔。

這裡是如何應用這些屬性的示例:

.wrap-text {
  word-wrap: break-word; /* 舊版本的瀏覽器支持 */
  overflow-wrap: break-word; /* 標準屬性 */
}

將上述 CSS 類應用於任何需要自動換行的元素上,例如:

<div class="wrap-text">這裡是一些可能會非常長並且需要自動換行的內容,比如長URL或者沒有空格的長文本串。</div>

此外,如果你也想保證在單詞之間適當地斷行,而不僅僅是在長字符串無法繼續在同一行顯示時,可以使用 white-space 屬性。例如:

.wrap-text {
  white-space: pre-wrap; /* 保留空白符,同時允許內容自動換行 */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

這將確保即使是格式化的文本(如代碼或者詩歌)也能夠根據容器的寬度適當換行,同時保留空白符(如空格和縮進)。

發布者:彬彬筆記,轉載請註明出處:https://www.binbinbiji.com/zh-hant/css/3203.html

(0)
彬彬筆記彬彬筆記
上一篇 2024年2月22日
下一篇 2024年3月2日

相關推薦

發表回復

您的電子郵箱地址不會被公開。 必填項已用 * 標註

蜀ICP備14017386號-13