有時候我們在開發中會遇到這樣一個問題：當文本內容過長時，對應的樣式會讓文本超出容器邊界而不自動換行，導致頁面布局混亂。這就需要我們使用 CSS 來解決這個問題。

要讓文本自動換行，我們可以使用 CSS 屬性word-wrap或overflow-wrap。

/* 使用 word-wrap */
.text {
word-wrap: break-word;
}
/* 使用 overflow-wrap */
.text {
overflow-wrap: break-word;
}

這兩個屬性的作用是一樣的，只是word-wrap屬性早期的情況下被傳進來，因此不是用新的overflow-wrap屬性申明的，但是實際上它們是等價的。

另外，我們也可以使用 CSS 屬性white-space來控制文本的空白符是否被瀏覽器忽略，并指定如何處理超出容器邊界的文本：

/* 顯示原始的空白符 */
.text {
white-space: pre;
}
/* 折疊所有的空白符，但不影響換行和文本內容 */
.text {
white-space: pre-line;
}
/* 折疊所有的空白符，包括文本內容內部的空白符 */
.text {
white-space: pre-wrap;
}

總而言之，當文本超出容器邊界時，我們可以使用 CSS 屬性word-wrap或overflow-wrap來讓文本自動換行，使用white-space來處理空白符。