在網(wǎng)頁設(shè)計中，文字的排版是非常重要的。而有些情況下，我們希望一段文字能夠自動折行，以適配不同的屏幕大小。這時候，我們可以借助CSS中的word-wrap和word-break屬性來實現(xiàn)。 word-wrap屬性用于設(shè)置是否允許在單詞內(nèi)部換行，默認(rèn)值為normal。而如果我們將其設(shè)置為break-word，則可以實現(xiàn)單詞自動換行的功能，即當(dāng)一行無法容納下整個單詞時，單詞會被強制分為兩行。 下面是一個使用word-wrap屬性實現(xiàn)自動折行的例子：

p {
width: 100px;
word-wrap: break-word;
}

在上述例子中，我們通過設(shè)置p元素的寬度為100px，并將word-wrap屬性設(shè)置為break-word，來實現(xiàn)了文字自動折行的效果。此時，當(dāng)p元素內(nèi)的文字超出100px的范圍時，文字就會自動折行，以保證整段文字能夠全部顯示出來。 需要注意的是，word-wrap屬性只是針對單詞內(nèi)部的自動折行，如果我們希望將一個長句子在兩個單詞之間斷開，則可以借助word-break屬性來實現(xiàn)。word-break屬性有三種取值：normal、break-all和keep-all。其中，break-all取值可以實現(xiàn)將長句子在單詞間自動斷開的效果。 下面是一個使用word-break屬性實現(xiàn)自動折行的例子：

p {
width: 100px;
word-wrap: break-word;
word-break: break-all;
}

在上述例子中，我們在上一個例子的基礎(chǔ)上，又新增了一個word-break屬性的設(shè)置。這樣設(shè)置后，當(dāng)p元素中的一個長句子無法在當(dāng)前行完全顯示時，它就會自動在兩個單詞之間斷開換行。 綜上所述，通過使用CSS中的word-wrap和word-break屬性，我們可以輕松實現(xiàn)文字的自動折行功能，提高網(wǎng)頁排版的美觀度和可讀性。