有時為了避免文本文字內(nèi)容超出一定寬度后溢出，我們想要溢出的部分不顯示但用省略號（...）顯示，這個時候我們可以使用CSS text-overflow文本溢出省略號屬性樣式實現(xiàn)。

一、text-overflow省略號樣式語法結(jié)構(gòu)

text-overflow語法：
text-overflow : clip | ellipsis

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

text-overflow應(yīng)用說明：

CSS text-overflow設(shè)置或檢索是否使用一個省略號標(biāo)記（...）標(biāo)示對象內(nèi)文本文字的溢出。
要想實現(xiàn)顯示不完內(nèi)容將顯示省略號代替，還需要html nobr標(biāo)簽完成（nobr禁止換行標(biāo)簽）

二、text-overflow應(yīng)用案例

常常遇到文章標(biāo)題列表布局排版時候，有的標(biāo)題比較長顯示不完，這個時候即又不想換行顯示，又想顯示不完的內(nèi)容自動出現(xiàn)省略號樣式。
顯示不完內(nèi)容省略號替代截圖

顯示css省略號

顯示不完的文字內(nèi)容通過css顯示省略號

1、實現(xiàn)方法

1）、對象設(shè)置text-overflow:ellipsis;省略號樣式
2）、使用nobr標(biāo)簽，強制讓內(nèi)容不換行（css換行、css不換行）。

2、案例描述
我們假設(shè)3個標(biāo)題的li列表布局，對li對象設(shè)置一定寬度和高度，對前兩個li列表內(nèi)容放過多測試文字，第三個li列表放入可顯示完測試文字。因為我們要避免內(nèi)容過多撐破對象，所以我們對li再設(shè)一個overflow:hidden css樣式，用于css隱藏超出內(nèi)容，避免內(nèi)容過多溢出li對象。

3、完整css+div的html源代碼：

4、css省略號布局實例截圖

過多文字li標(biāo)簽出現(xiàn)使用css省略號樣式截圖



使用text-overflow樣式讓顯示不完內(nèi)容通過css實現(xiàn)省略號排版

三、text-overflow省略號樣式總結(jié)

要想隱藏溢出內(nèi)容同時又想讓過多內(nèi)容以省略號樣式顯示，需要用到css overflow,和text-overflow樣式，同時避免文字自動換行我們使用html nobr標(biāo)簽強制內(nèi)容不換行，使用使用注意這幾個CSS樣式和HTML標(biāo)簽配合使用才能達(dá)到多余文字內(nèi)容出現(xiàn)省略號樣式，大家下來靈活運用多次實踐即可。

1、案例演示：查看案例