CSS中，當(dāng)超出父元素大小的子元素需要換行時，可以通過設(shè)置父元素的white-space屬性，來達(dá)到控制換行的效果。在這里我們重點介紹一下white-space屬性中的nowrap和pre-wrap值。

首先，我們來看一下默認(rèn)情況下的換行效果：

.parent {
width: 200px;
height: 50px;
padding: 10px;
border: 1px solid black;
}
.child {
width: 300px;
height: 50px;
background-color: yellow;
}

上述代碼中，父元素.parent的寬度為200px，高度為50px，里面包含了一個子元素.child，其寬度為300px，高度為50px。由于子元素寬度超過父元素寬度，所以會出現(xiàn)超出的現(xiàn)象，此時默認(rèn)情況下，換行會自動發(fā)生，子元素會按照自己的寬度進(jìn)行換行：

現(xiàn)在，我們來設(shè)置一下父元素的white-space屬性，來控制換行的效果：

nowrap值

.parent {
width: 200px;
height: 50px;
padding: 10px;
border: 1px solid black;
white-space: nowrap;
}
.child {
width: 300px;
height: 50px;
background-color: yellow;
}

上述代碼中，我們將父元素.parent的white-space屬性設(shè)置為nowrap，表示不允許換行，此時子元素的超出部分將會被隱藏。現(xiàn)在我們來看一下效果：

pre-wrap值

.parent {
width: 200px;
height: 50px;
padding: 10px;
border: 1px solid black;
white-space: pre-wrap;
}
.child {
width: 300px;
height: 50px;
background-color: yellow;
}

上述代碼中，我們將父元素.parent的white-space屬性設(shè)置為pre-wrap，表示保留所有空格和換行符，并允許換行，此時子元素會按照自己的寬度進(jìn)行換行。現(xiàn)在我們來看一下效果：

通過設(shè)置父元素的white-space屬性，我們可以方便地控制子元素的換行效果，達(dá)到更好的頁面展示效果。