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