CSS的wrap、word-wrap和word-break屬性都能夠用來控制文本的換行。
其中wrap屬性指定了文本應(yīng)該如何在容器中被包裝。如果設(shè)置了wrap,當(dāng)文本到達(dá)容器的右邊緣時(shí),就會被移到下一行。可以使用以下代碼:
.container { width: 300px; border: 1px solid black; overflow-wrap: break-word; }
word-wrap屬性以及overflow-wrap屬性在核心上是一致的,主要是為了向后兼容,兩者也是用于控制單詞如何換行。如果單詞的長度超出了容器的寬度,設(shè)置了word-wrap后,該單詞就會被截?cái)嗖⒁频较乱恍虚_頭。可以使用以下代碼:
.container { width: 300px; border: 1px solid black; word-wrap: break-word; }
而word-break用于確定單詞是否允許在一個(gè)在字母中間換行。除非設(shè)置了break-word,否則中文字符不能被換行。可以使用以下代碼:
.container { width: 300px; border: 1px solid black; word-break: break-all; }
總而言之,如果您需要實(shí)現(xiàn)自己的布局,這三種屬性都可以實(shí)現(xiàn)在CSS中控制文本的換行,但它們的行為略有不同,要根據(jù)自己的需要和實(shí)際情況選擇。