在對網頁進行美化的時候， 我們經常會需要截斷內容， 以顯示簡潔內容， 然后通過鏈接查看詳細內容， 以下給出兩個例子。

eg-1:

對于此情況， 并不是使用css控制顯示省略號， 而是從服務器獲取的內容自帶省略號。 對于如何將圖文并茂的文章， 簡化為無樣式簡單文本， 不是此博客所討論的， 唯一的提示：使用正則表達式。

?

eg-2:

這就是第二種情況， 這里的省略號是用css設置的， 這也是這篇博客主要討論的情況。

　　

　　對于第二種情況， 你可能會疑問， 為何不在服務器端對其長度進行設置， 就像第一個實例一樣。 使用這種方式， 你可能會看到：

　　因為中文的占位相對英文較大， 所以在截取相同長度的時候， 會顯得不太美觀（你丫的后面還有那么大位置， 你省略個毛線啊。。。）

　　當然， 有的大神們可能喜歡截取指定字節的文字， 這樣就會相對平衡了， 不過個人暫時還是比較偏向使用這個CSS來設置， 畢竟相對讓服務器花時間去計算截取字節， 還不如讓客戶端的css來讓服務器休息一下。 當然， 也可是使用javascript來完成這個截取的任務， 但是我還是覺得一句簡單的Css比較方便。

　　本來eg-2的示例， 我準備在新聞網站上找的， 但是我隨便看了下兩個較大的新聞網站，他們類似這樣的一個標題， 并沒有截取， 而是有多少就顯示多少。 當然， 他們能這樣做， 可能是因為新聞對標題有字數限制吧。你可以看到左邊的圖或eg-2的圖， 如果不做標題省略， 當標題過長， 標題將自動換行， 而又因 我們在設計時， 會設置新聞顯示框的高度。 你可以想象， 在左邊每個標題都需要換行顯示時， 新聞標題將會縱向溢出。因為新聞標題限制的問題， 所以他們不會出現這種溢出。

　　上面說的一大串， 只是為了說明——對于標題長度無具體限制的情況下， 省略標題多余內容是很有必要的， 具體使用哪種方式， 這個看個人喜好。 這里主要介紹以css的形式省略。

?

---

?

　　廢話結束， 現在來介紹如何通過css來設置溢出省略， 方法很簡單， 百度一下“css 溢出顯示省略號”， 你即可得到答案。

　　在你需要設置內容溢出省略的標簽里添加如下屬性：

{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

?　　在設置該屬性后， 便可實現內容溢出顯示省略號。這里還有一點， 在對li設置該屬性后， li前面的標記將會消失， 你還需要為li添加一個樣式屬性：

{list-style-position:inside;}

?

　　寫博客， 并不一定因為它的內容高端， 也可以因為它容易被遺忘， It's like keeping the diary.

轉載于:https://www.cnblogs.com/hourglasser/p/3264152.html

總結

以上是生活随笔為你收集整理的CSS内容溢出时，显示省略号的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。