編碼的世界 / 優質文選 / 生涯

CSS設置文本折行處理


2021年9月30日
-   

一般情況只要定好文字所在容器的寬度文字就會折行,如下面:

想控制一段文本不折行,設置如下的樣式:
white-space: nowrap;
word-wrap: normal;
word-break: keep-all;
相反,如果一段文本不能折行了,那麼可能是設置了如上的樣式,則將樣式改為
white-space: normal;
word-wrap: break-word;
word-break: break-all;
含有很長英文情況 定好文字所在容器的寬度後文字不會折行,效果:

對其設置
white-space: normal;
word-wrap: break-word;
word-break: break-all;
可以實現折行。如下:

熱門文章