當(dāng)網(wǎng)頁中的文本太長(zhǎng),太寬無法完美地適配到頁面的時(shí)候,自動(dòng)換行是一個(gè)很重要的屬性。在CSS中,可以通過控制white-space和word-wrap的屬性實(shí)現(xiàn)文字自動(dòng)換行。
white-space屬性控制元素內(nèi)的空白字符如何處理,其中常用的有以下幾個(gè)值:
- normal:通常的換行規(guī)則,忽略多余的空白字符。
- nowrap:不允許換行,忽略空白字符。
- pre:保留所有空白字符,換行符和回車符。
- pre-wrap:保留所有空白字符,但允許換行符和回車符。
- pre-line:合并所有空白字符,但允許換行符和回車符。
例如,以下代碼就使用了pre-wrap屬性,當(dāng)文本寬度超過父元素時(shí)會(huì)自動(dòng)換行:
p { white-space: pre-wrap; }此外,word-wrap屬性也是控制元素內(nèi)文本自動(dòng)換行的另一個(gè)屬性。當(dāng)單詞太長(zhǎng)時(shí),這個(gè)屬性可以強(qiáng)制將單詞拆成多個(gè)部分,以適應(yīng)容器的寬度。其常用的屬性值如下: - normal:依據(jù)瀏覽器的額外策略自動(dòng)插入換行符。 - break-word:遇到長(zhǎng)單詞時(shí)自動(dòng)將其拆分成多行。 例如,以下代碼可以強(qiáng)制長(zhǎng)單詞拆分成多行:
p { word-wrap: break-word; }在實(shí)際應(yīng)用中,可以根據(jù)具體情況來選擇合適的屬性來控制文本的自動(dòng)換行。