要使 CSS 內的內容在超出容器寬度時自動換行,可以使用 word-wrap
和 overflow-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