css設定文字超出一行或多行就隱藏並顯示省略號

這裡要說的是文字超出多行才隱藏文字並且顯示省略號而不是超出一行就省略。

首先大家要了解一些基本的文字文字屬性的設定，例如white-space(超出是否換行)，letter-spacing（字間距），text-overflow（文字超出如何顯示），word-wrap（允許長單詞或 url 位址換行到下一行），overflow（超出塊範圍如何顯示）等等...

（1）首先看一下超出一行就隱藏並顯示省略的**：

width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

都是先規定文字寬度width（或者max-width），然候超出要hidden隱藏，nowarp是不換行屬性，ellipsis表示省略號。

給標籤設定屬性,例如span吧:

span span::after

上述顯示兩行，超出顯示省略號。先宣告行高20px，規定最大高度40px（就是顯示剛好兩行嘍），after中的設定是在span這一塊最後加乙個content，內容是「...」，這種是相容的辦法，不過顯示起來會稍稍有點醜。

（3）由於最近在寫手機端，涉及到文字超出兩行顯示省略號，於是乎，一種方法誕生了，直接上**：

span

注：這個方法適用webkit核瀏覽器和手機端，效果如下圖：