標題超過長度就顯示省略號-CSS代碼來解決

當一條信息的字數超過了容器的長度後，該怎麼顯示呢？通常來講，這樣的信息是文章的標題，新聞列表通常對寬度是有限制的，通常的寬度也有200PX左右吧。通常超過以後咱們就但願顯示省略號，問題是：該怎麼顯示纔好呢？咱們能夠寫一個函數而後將多餘的字符用「...」代替，可是這樣也有很差的地方，那就是：事實上仍是控制很差的。當你用left()函數的時候，它讀取的長度不必定相同，由於標題裏面可能帶數字和英文。而且，這樣的標題對於蜘蛛來講，是沒辦法看到所有的。

 

一個好的方法是用CSS來控制容器，當標題的長度大於容器的長度時，咱們能夠用text-overflow來生成「...」而不是簡單的截取。

 

text-overflow的定義是:

Name: text-overflow-mode
Value: clip | ellipsis | ellipsis-word

 

clip : 　不顯示省略標記（…），而是簡單的裁切
ellipsis : 　當對象內文本溢出時顯示省略標記（…），省略標記插入的位置是最後一個字符。
ellipsis-word : 　當對象內文本溢出時顯示省略標記（…），省略標記插入的位置是最後一個詞（word）。

 

因此，你能夠用它來生成「...」而不是用函數，用該CSS對於蜘蛛來講，截取的部分依然是可見的（只是沒有顯現）。若是用標題截取函數，則標題不是完整的，若是咱們用CSS樣式text-overflow:ellipsis，輸出的標題是完整的。

 

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

 

那麼，若是咱們要給p標籤訂義text-overflow:ellipsis就能夠這麼寫：

 

p {
white-space: nowrap;
width: 100%; 
overflow: hidden; 
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}

 

這樣就達到了想要的結果。