在進行網頁布局設計時，我們通常會遇到文本內容超出容器邊界的情況。此時，我們需要使用CSS中自動換行的功能來解決這個問題。

/* 示例CSS代碼 */
.container {
width: 300px; /* 容器寬度 */
height: 200px; /* 容器高度 */
overflow: hidden; /* 隱藏超出容器范圍的內容 */
}
.text {
white-space: pre-wrap; /* 開啟自動換行 */
}

以上是自動換行的相關CSS代碼，接下來我們來詳細解釋一下。

首先，我們需要給容器設定寬度和高度，這樣才能保證文本內容能夠自動適應容器大小。

同時，我們使用overflow屬性將超出容器范圍的內容隱藏起來，這樣既美觀又能提升用戶體驗。

接著，我們需要將需要自動換行的文本內容所在的元素設定為white-space屬性的pre-wrap值。pre-wrap開啟自動換行功能，并保留原始文本中的空格、換行符等字符，使文本呈現出原本的格式。

總之，CSS中自動換行功能是我們進行網頁布局設計必不可少的一項技能，通過合理使用，能夠讓我們的網頁更加美觀、實用。