CSS可以通過“word-wrap”和“overflow-wrap”屬性來實現自動換行，而且這些屬性可以幫助網頁開發者在面對不定寬度元素的時候，更好地適應所需的高度。

/* 設置寬度為200px，高度為auto（自適應），以及文字超出時自動換行 */
div {
width: 200px;
height: auto;
overflow-wrap: break-word;
word-wrap: break-word;
}

以上代碼會讓元素的寬度固定在200px，而高度會自適應所需的空間，同時以“break-word”來規定當文字超出寬度時該如何處理，即自動換行。這個屬性不僅適用于常見的文本，也同樣適用于英文單詞，代碼以及其他斷行的需要。

自然，CSS中的word-wrap和overflow-wrap屬性是有一定的區別的。簡單來說：

• word-wrap在Webkit/Opera瀏覽器上有效，而overflow-wrap在IE和Firefox瀏覽器上有效；
• word-wrap提供了一個“break-word”值，可以將長單詞拆成多行，而overflow-wrap只能在空格處斷行。

需要注意的是，在進行自動換行處理時，應當正確的防止內容被截斷。在實際工作中，我們可以通過設置text-overflow為ellipsis或者clip來進行控制，同時設置較短的min-height（或者height）值來保證內容不被截斷。

/* 設置高度，并防止內容被截斷 */
div {
width: 200px;
min-height: 50px;
height: auto;
overflow-wrap: break-word;
word-wrap: break-word;
text-overflow: ellipsis;
white-space: nowrap;
}

同時，在實際的應用場景中，還可以通過JS來進行一些子元素的調整和內容的整理，以便更好地適應不定寬的元素并且有更好的視覺效果。