web前端培訓：CSS中單行文字溢位顯示省略號的方法

　　CSS中單行文字溢位顯示省略號的方法你知道嗎?在web前端技術學習中，這個問題其實是屬於老生常談了，因為css單行文字的應用是非常頻繁的，比如網站最基本的文章列表，標題會很長，而顯示列表的區域寬度卻沒有這麼寬，這時候最正常的做法就是讓超出寬度的部分文字用省略號(…)來表示。

　　通常做法是網站後臺程式擷取一定的字元然後輸出到前臺顯示或者前臺用javascript擷取一定的字元，但 是透過控制字數來擷取的話還是存在一個大問題的，因為中文和英文的字元寬度問題，這個字數不好控制，而且通用性較差。那麼有沒有更好的方法呢，比如直接用 CSS來解決的，當然是有的。

　　 web前端培訓：CSS中單行文字溢位顯示省略號的方法，首先我們要知道單行文字是如何實現這個效果的，程式碼如下：

　　請注意，以上三行程式碼缺一不可哦，那接下來我們就一一看一下給個的作用吧!

　　–>

　　text-overflow

　　value分別為 clip | ellipsis | ellipsis-word

　　–>clip ：不顯示省略標記(…)，而是簡單的裁切

　　–>ellipsis ：當物件內文字溢位時顯示省略標記(…)，省略標記插入的位置是最後一個字元

　　–>ellipsis-word：物件內文字溢位時顯示省略標記(…)，省略標記插入的位置是最後一個詞(word)

　　text-overflow

　　是一個比較特殊的樣式，因為我們可以用它代替我們通常所用的標題擷取函式，而且這樣做對搜尋引擎更加友好，如：標題檔案有50個漢字，而我們的列表可能只有400px的寬度。如果用標題擷取函式，則標題不是完整的，如果我們用CSS樣式text- overflow:ellipsis，輸出的標題是完整的，只是受容器大小的侷限不顯示出來罷了(表現上是超出部分顯示省略標記…)。

　　text-overflow: ellipsis

　　屬性僅是註解，當文字溢位時是否顯示省略標記。並不具備其它的樣式屬性定義。我們想要實現溢位時產生省略號的效果。還必須定義：強制文字 在一行內顯示(white-space:nowrap)及溢位內容為隱藏(overflow:hidden)。只有這樣才能實現溢位文字顯示省略號的效果。