CSS文本自動(dòng)換行是一項(xiàng)非常有用的功能。可以通過CSS的"word-wrap"屬性和"white-space"屬性來實(shí)現(xiàn)文本自動(dòng)換行。

word-wrap屬性

{
word-wrap: break-word;
}

word-wrap屬性允許我們指定在文本達(dá)到容器的邊緣時(shí)是否應(yīng)該換行。如果將word-wrap設(shè)置為"break-word"，則當(dāng)單詞太長(zhǎng)時(shí)，單詞將會(huì)被截?cái)啵⑹Ｓ嗟膬?nèi)容移到下一行。

white-space屬性

{
white-space: pre-wrap;
}

white-space屬性影響元素中空白字符的處理方式。如果將它設(shè)置為"pre-wrap"，則會(huì)將空白字符視為普通字符，并在需要時(shí)自動(dòng)換行。這意味著，在必要的情況下，文本可以在單詞之間或單詞的中間分割。

示例代碼

.wrap {
width: 200px;
height: 100px;
border: 1px solid #ccc;
overflow: auto;
word-wrap: break-word;
white-space: pre-wrap;
}

在這個(gè)示例中，我們通過設(shè)置容器的寬度和高度來限制文本的寬度和高度，且當(dāng)文本長(zhǎng)度大于容器時(shí)，文本會(huì)自動(dòng)換行。

結(jié)論

使用CSS的word-wrap和white-space屬性，我們可以實(shí)現(xiàn)文本的自動(dòng)換行，從而使文本在容器中自適應(yīng)并顯示完整的內(nèi)容。