前言
在css的使用中，我們經(jīng)常性的需要對溢出文本進行處理，在實際的項目中钻心，由于文字內(nèi)容的長度不確定性和頁面布局的固定性，難免會出現(xiàn)文字內(nèi)容超過div（或其他標簽旦委，下同）區(qū)域的情況，此時比較好的做法就是當文字超過限定的div寬度后自動以省略號（…）顯示雏亚，這樣缨硝，按照習慣，人們都會知道這兒有文字被省略了罢低。
在css中有個屬性叫做text-overflow:ellipsis;配合其他一些屬性可以實現(xiàn)IE,chrome,safria瀏覽器下文字溢出點點點省略號顯示查辩，在加上opera瀏覽器的私有屬性-o-text-overflow:ellipsis;就目前而言，可以基本實現(xiàn)Firefox瀏覽器以外的所有主流瀏覽器的文字溢出點點點省略號顯示网持。
瀏覽器支持：
| 瀏覽器 | 版本 | 支持 | 屬性 |
|---|---|---|---|
| Internet Explorer | 6.0+ | text-overflow | ellipsis｜clip |
| Firefox (Gecko) | 7.0+ | text-overflow | ellipsis｜clip |
| Opera (Presto) | 9.* - 10.* | -o-text-overflow | ellipsis ｜clip |
| 11.0+ | text-overflow | ellipsis ｜ clip | |
| Safari ｜ Chrome ｜ WebKit | 1.3｜1.0｜ 312.3 | text-overflow | ellipsis ｜clip |
通過瀏覽器支持表我們可以看出，F(xiàn)irefox對 text-overflow 嚴重落后于其它瀏覽器翎碑，IE從數(shù)年前的6.0版本就支持了這個屬性，而Firefox在IE6推出之后的漫長歲月里日杈，F(xiàn)irefox經(jīng)過了4次大版本號升級都沒有提供支持，直到Firefox 7.
到目前為止莉擒，F(xiàn)irefox之外的瀏覽器都支持 text-overflow css 了酿炸，所以開發(fā)者只需要針對Firefox 3.x - 6.x做特別處理。
除Firefox外的單行文本溢出解決：
對于單行文本溢出我們使用一句話涨冀，放在你需要解決溢出問題的元素上：
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
這句話可以解決大部分的瀏覽器單行文本溢出。
針對Firefox老版本扁眯，做省略號效果
針對Firefox，做省略號效果翅帜，目前主要有3種方案姻檀，分別是：
- css binding xml
- JavaScript截取（此處不做說明涝滴，因為能用css為何要用js）
- 省略號遮蓋。
css binding xml
這是老外提供的一種方法歼疮，使用Firefox的私有屬性調(diào)用一個XML文件:ellipsis.xml，可以使Firefox火狐瀏覽器下文字溢出后以省略號的形式顯示缩麸。
ellipsis.xml的內(nèi)容如下：
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
<content>
<xul:description crop="end" xbl:inherits="value=xbl:text">
<children/>
</xul:description>
</content>
</binding>
</bindings>
把ellipsis.xml另存為到本地你的css文件存放的地方赡矢，然后就是調(diào)用：
-moz-binding:url(‘ellipsis.xml#ellipsis’);
跟css樣式寫法一致愚屁，再結合上面的css樣式济竹，就可以實現(xiàn)所有主流瀏覽器下的單行文字溢出用省略號表示了。css表示如下：
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
-moz-binding:url('ellipsis.xml#ellipsis');
注意：此XML文件貌似不支持向上路徑的訪問梦谜，也不支持絕對路徑的訪問袭景。也就是說此XML文件需要放在調(diào)用文件（css文件，或HTML文件）的同目錄下或下一級目錄下耸棒，不能向上訪問。所以為了麻煩直接存到調(diào)用文件的統(tǒng)一級目錄就行了
省略號遮蓋
這種方式有點老的掉牙单山，因為自2013年以后所有瀏覽器都已經(jīng)支持 text-overflow:ellipsis; 方法
所以這里只是附上代碼大家看看得了
<h3>省略號遮蓋法</h3>
<div class="text_overflow_margin" >
<div class="margin_con" >這是一段比較長的文字幅疼，用來測試是否文字溢出時會用省略號顯示。</div>
<div class="margin_ellipsis" >…</div>
</div>
<style>
.text_overflow_margin{
width: 24em; height: 20px; overflow:hidden; zoom:1; background: #333;
}
.text_overflow_margin .margin_con{
height: 20px; margin-right: 1em; background: #f00;
}
.text_overflow_margin .margin_ellipsis{
width: 1em; height: 20px; float:right; margin-top: -20px;
}
</style>
多行文本溢出省略號
不兼容的WebKit內(nèi)核新版屬性
有時候我們需要在多行文本后面添加一個省略號爽篷，怎么樣添加呢？
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
說明：
- -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數(shù)铡溪。 為了實現(xiàn)該效果，它需要組合其他的WebKit屬性泪喊。
- display: -webkit-box; 必須結合的屬性 棕硫，將對象作為彈性伸縮盒子模型顯示 。
- -webkit-box-orient 必須結合的屬性 饲帅，設置或檢索伸縮盒對象的子元素的排列方式 瘤泪。
適用范圍：因使用了WebKit的CSS擴展屬性，該方法適用于WebKit瀏覽器及移動端对途；所以其兼容性不太好
<p class="article_synopsis">
我們時常對城市中的建筑過目即忘，甚至你不會覺得城市與城市之間有什么不同惶洲。因為這些鋼筋混泥土建筑的空間里，沒有與我們內(nèi)心與之呼應的東西恬吕。這些東西是一個民族幾千年里凝練下來的一種審美，流淌在我們的血液里渐裂。
</p>
<style>
.article_synopsis {
display: -webkit-box; text-overflow: ellipsis; text-indent: 2em;
overflow : hidden; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
height: 90px; width: 170px; font-size: 12px;
}
</style>
兼容的寫法
我們?yōu)榱思嫒菘紤]可以使用偽類來達到相同的效果
p {
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}
p::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
}
完整代碼實現(xiàn)：
<p class="synopsis">
我們時常對城市中的建筑過目即忘钠惩，甚至你不會覺得城市與城市之間有什么不同。因為這些鋼筋混泥土建筑的空間里膝捞，沒有與我們內(nèi)心與之呼應的東西愧沟。這些東西是一個民族幾千年里凝練下來的一種審美，流淌在我們的血液里央渣。
</p>
<style>
.synopsis{
position: relative; line-height: 20px; overflow: hidden;
height: 80px; width: 170px; font-size: 12px;
}
.synopsis::after{
content: "..."; position: absolute; bottom: 0; right: 0;
line-height: 20px; background: #fff; width: 14px;
}
</style>
說明：
- 設置
line-height屬性，防止超出的文字露出部分北启。 - 給
p::after添加定位拔第、顏色、行高及寬度可避免文字只顯示一半蚊俺。 - 由于ie6-7不顯示 content 內(nèi)容，所以要添加標簽兼容ie6-7（如：<span>…<span/>）批钠；兼容ie8需要將::after替換成:after得封。
適用范圍：該方法適用范圍廣，但文字未超出行的情況下也會出現(xiàn)省略號,可結合js優(yōu)化該方法忙上。
關于JavaScript 方案可以去看看Clamp.js和jQuery插件-jQuery.dotdotdot
小結：
至此我們常用的css溢出變?yōu)槭÷蕴柕姆椒ɑ窘Y束了
提示：后面還有精彩敬請期待，請大家關注我的CSDN博文：儂姝沁兒茬斧，或者我的簡書專題：web前端。如有意見可以進行評論项秉，每一條評論我都會認真對待。
