4. 溢出的文字省略號顯示

4.1 white-space

• white-space設(shè)置或檢索對象內(nèi)文本顯示方式。通常我們使用于強(qiáng)制一行顯示內(nèi)容

white-space:normal ；默認(rèn)處理方式white-space:nowrap ；　強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br標(biāo)簽對象才換行。

4.2 text-overflow 文字溢出

• 設(shè)置或檢索是否使用一個省略標(biāo)記（…）標(biāo)示對象內(nèi)文本的溢出

text-overflow : clip ；不顯示省略標(biāo)記（...），而是簡單的裁切 text-overflow：ellipsis ； 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記（...）

注意：

一定要首先強(qiáng)制一行內(nèi)顯示，再次和overflow屬性 搭配使用

4.3 單行文本溢出顯示省略號——總結(jié)三步曲

/*1. 先強(qiáng)制一行內(nèi)顯示文本*/white-space: nowrap;/*2. 超出的部分隱藏*/overflow: hidden;/*3. 文字用省略號替代超出的部分*/text-overflow: ellipsis;

4.4 多行文本溢出顯示省略號

多行文本溢出顯示省略號，有較大兼容性問題，適合于webkit瀏覽器或移動端（移動端大部分是webkit內(nèi)核）

更推薦讓后臺人員來做這個效果，因?yàn)楹笈_人員可以設(shè)置顯示多少個字，操作更簡單。

總結(jié)

以上是生活随笔為你收集整理的十、CSS三行代码实现 溢出的文字省略号显示（white-space: nowrap;overflow: hidden;text-overflow: ellipsis;）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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