轉(zhuǎn)載 https://www.cnblogs.com/nanyang520/p/11358623.html

1、使文字不換行

white-space: nowrap;

值	描述
normal	默認(rèn)。空白會(huì)被瀏覽器忽略。
pre	空白會(huì)被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標(biāo)簽。
nowrap	文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。
pre-wrap	保留空白符序列，但是正常地進(jìn)行換行。
pre-line	合并空白符序列，但是保留換行符。
inherit	規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。

2、允許長(zhǎng)單詞換行

word-wrap:break-word;

值	描述
normal	只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）。
break-word	在長(zhǎng)單詞或 URL 地址內(nèi)部進(jìn)行換行。

3、換行不截?cái)鄦卧~

word-break:break-all;

值	描述
normal	使用瀏覽器默認(rèn)的換行規(guī)則。
break-all	允許在單詞內(nèi)換行。
keep-all	只能在半角空格或連字符處換行。

4、單行文字超出顯示省略號(hào)

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

5、多行文字超出顯示省略號(hào)

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

總結(jié)

以上是生活随笔為你收集整理的css处理文字不换行、换行截断、溢出省略号的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。