要使 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
