文字超出部分顯示省略號還是比較常用的一個效果,最近看到網上的一些方法親自實踐了一下,發現有些以前一些瀏覽器不能用的屬性現在可以用了，于是研究了一番，現總結如下：

我們先來看下HTML代碼：

<div><p><span>用css來實現當文字超出寬度時顯示省略號的效果</span></p> </div>

CSS代碼：

div{width: 200px; }span{display: block;width: 200px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis; }

我們可以看到其中可用到了text-overflow:ellipsis;網上說這是一個IE特有的屬性，別的瀏覽器不支持，經過實踐，現在chrome和火狐都已經支持了，

在chrome下的效果：

我的chrome版本號：

在火狐下的效果：

我的火狐版本號：

又說opera不支持text-overflow，針對Opera的話得使用-o-text-overflow:ellipsis;歐朋瀏覽器還沒有裝所以無法實踐，但通過網上查找已經找到答案，有博主說自己新版的歐朋已經支持這個屬性了，看博客時間是2012年，看來也是早就支持了的。

而且CSS中的這些屬性不能少，否則不能顯示省略號。可以順著這樣的思路來，要把文本限制在一行(white-space:nowrap;（white-space屬性聲明建立布局過程中如何處理元素中空白符）),這一行有寬度(width)，有寬度就有超出的部分，將超出的部分隱藏起來(overflow:hidden;)，然后后面跟上省略號(text-overflow:ellipsis;)。

還有一種非常規的方法補省略號，要用到偽對象after,思路是一個標簽作內容，再加一個標簽作填補省略號用，并且加起來的寬度不能超過它們容器的寬度，否則就換行。

來看下CSS代碼：

span{display: block;width: 200px;overflow: hidden;white-space: nowrap;}p{clear: both;}p span{float: left;max-width: 175px;}p:after{content: "...";}

這樣能有省略號的效果，但會有小小的問題，我們一起來看下效果：

在chrome下和火狐下都是這樣的效果，可見這樣的方法并不完美。

并且使用text-overflow:ellipsis來顯示省略號也有好處，可以不用限定字數，對SEO也比較友好，比如我們的標題使用這個屬性，標題看起來被截取了，但搜索引擎搜索的時候還是按完整的標題搜索，因為標題實際上并沒有被截取，只是沒有顯示完全而已。

當然這樣控制的方法都有一個最大的不足就是只能控制一行，js可以控制多行，并且也不復雜，我們這里只是就事論事罷了。

此外說到SEO，最近正在看一本書叫《榨干百度谷歌》，改天看完把筆記整理出來。此書沒有什么干貨，感覺可以歸于科普讀物。

本次學習不僅學到知識，也再一次驗證了那句話：實踐出真知。不僅要多看，還要多寫，多練，實踐才是檢驗真理的唯一標準，因為IT技術發展迅速，不知道什么時候以前不能用的現在就可以用了，以前能用的現在就不能用了，讓代碼真正的在自己手上過一遍，這是作為程序員基本的一個節操。

轉載于:https://www.cnblogs.com/purl135/p/4118712.html

總結

以上是生活随笔為你收集整理的关于用css实现的文字超出部分显示省略号的全部內容，希望文章能夠幫你解決所遇到的問題。

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