在網頁設計中，有時文本長度會超過容器寬度，此時如果不做任何處理，文本會溢出容器。所以我們需要利用CSS中文本換行的特性，使得文本自動折行。在CSS中實現文本換行的關鍵在于設置“word-wrap”（單詞換行）屬性和“overflow-wrap”（換行）屬性。 “word-wrap”屬性定義了字是否允許在單詞內換行。當將屬性值設為“normal”時，文本將不會在單詞內換行；當將屬性值設為“break-word”時，文本會在單詞內換行。 “overflow-wrap”屬性定義了文本是否允許在單詞內換行。當將屬性值設為“normal”時，文本將不會在單詞內換行；當將屬性值設為“break-word”時，文本會在單詞內換行。 下面我們可以看到一個示例代碼，其中pre標簽可幫助我們保留行內空格以及空行。注釋的內容可以幫助大家理解CSS的使用方法。

/* 容器寬度為300px */
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
/* 設置文本可以換行 */
p {
word-wrap: break-word;
overflow-wrap: break-word;
}

但是我們不能保證每個瀏覽器都支持“word-wrap”和“overflow-wrap”屬性。因此，它們的替代方案是“word-break”和“text-overflow”屬性。前者是用來定義單詞是否允許在中間斷行；后者是用來定義文本是否顯示省略號。 以上內容就是對于CSS超出寬度自動換行的一些介紹和代碼示范。希望可以對大家在網頁設計中遇到這類問題時有所幫助。