CSS中,設置文本不換行是很常見的做法,但是有時候我們需要一段較長的英文文本在不超出父元素寬度的情況下自動換行。這時候,我們可以使用CSS屬性:word-wrap或者white-space來實現。
首先來看一下word-wrap屬性。該屬性有兩個可選值:normal和break-word。
p { word-wrap: break-word; /*使用break-word實現文本自動換行*/ }
上述CSS代碼將會使該段落中的英文文本在其寬度不超過其父元素寬度的情況下自動換行。如果使用的是normal的值,那么該段文本則不會自動換行,需要手動添加換行符。
接下來介紹white-space屬性。該屬性同樣有兩個可選值:normal和pre-wrap。
p { white-space: pre-wrap; /*使用pre-wrap實現文本自動換行*/ }
在上述CSS代碼中,值為pre-wrap將會使文本根據父元素寬度進行自動換行。值為normal則對文本進行默認處理,即不自動換行。
以上兩種方法都很簡單易懂,根據實際情況選擇合適的方法即可。祝大家CSS編碼愉快。
下一篇css英文字不拆分