在CSS中自動(dòng)換行中文字需要使用word-break和overflow-wrap兩個(gè)屬性。word-break屬性用于設(shè)置是否應(yīng)在單元格內(nèi)換行，overflow-wrap屬性用于控制當(dāng)行超出容器寬度時(shí)如何進(jìn)行換行處理。

p{
word-break: break-all; /*能在單詞內(nèi)進(jìn)行換行*/
overflow-wrap: break-word;/*可以在單詞內(nèi)進(jìn)行折行*/
}

在以上代碼中，我們?cè)O(shè)置了p標(biāo)簽的word-break屬性為break-all，這在單元格內(nèi)出現(xiàn)文本較長(zhǎng)時(shí)會(huì)強(qiáng)制文字?jǐn)U大到所有空間，從而出現(xiàn)自動(dòng)換行的效果。同時(shí)，我們也設(shè)置了overflow-wrap屬性為break-word，如果p標(biāo)簽中出現(xiàn)單詞太長(zhǎng)，將會(huì)自動(dòng)換行并將長(zhǎng)單詞拆分。

在實(shí)際應(yīng)用中，我們也可以通過(guò)媒體查詢(xún)來(lái)針對(duì)不同的設(shè)備進(jìn)行不同的換行控制。例如，我們可以設(shè)置在手機(jī)端時(shí)，強(qiáng)制單詞進(jìn)行換行以免超出屏幕寬度導(dǎo)致文字顯示不全。

@media (max-width: 767px) {
p{
word-break: break-all;
}
}

在以上代碼中，我們通過(guò)媒體查詢(xún)?cè)O(shè)置了當(dāng)屏幕寬度小于767像素時(shí)，p標(biāo)簽的word-break屬性為break-all，這樣便可以確保文字不會(huì)超出屏幕寬度而導(dǎo)致顯示不全的問(wèn)題。