css 的规律摸索之路（三）文本省略问题

前言

在css的使用中，我们经常性的需要对溢出文本进行处理，在实际的项目中，由于文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div（或其他标签，下同）区域的情况，此时比较好的做法就是当文字超过限定的div宽度后自动以省略号（…）显示，这样，按照习惯，人们都会知道这儿有文字被省略了。

在css中有个属性叫做text-overflow:ellipsis;配合其他一些属性可以实现IE,chrome,safria浏览器下文字溢出点点点省略号显示，在加上opera浏览器的私有属性-o-text-overflow:ellipsis;就目前而言，可以基本实现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

通过浏览器支持表我们可以看出，Firefox对text-overflow严重落后于其它浏览器，IE从数年前的6.0版本就支持了这个属性，而Firefox在IE6推出之后的漫长岁月里，Firefox经过了4次大版本号升级都没有提供支持，直到Firefox 7.

到目前为止，Firefox之外的浏览器都支持text-overflow css了，所以开发者只需要针对Firefox 3.x - 6.x做特别处理。

除Firefox外的单行文本溢出解决：

对于单行文本溢出我们使用一句话，放在你需要解决溢出问题的元素上：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;

这句话可以解决大部分的浏览器单行文本溢出。

针对Firefox老版本，做省略号效果

针对Firefox，做省略号效果，目前主要有3种方案，分别是：

1. css binding xml

2. JavaScript截取（此处不做说明，因为能用css为何要用js）
3. 省略号遮盖。

css binding xml

这是老外提供的一种方法，使用Firefox的私有属性调用一个XML文件(ellipsis.xml)，可以使Firefox火狐浏览器下文字溢出后以省略号的形式显示。

ellipsis.xml的内容如下：

<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文件存放的地方，然后就是调用：

-moz-binding:url(‘ellipsis.xml#ellipsis’);

跟css样式写法一致，再结合上面的css样式，就可以实现所有主流浏览器下的单行文字溢出用省略号表示了。css表示如下：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
-moz-binding:url('ellipsis.xml#ellipsis');

注意：此XML文件貌似不支持向上路径的访问，也不支持绝对路径的访问。也就是说此XML文件需要放在调用文件（css文件，或HTML文件）的同目录下或下一级目录下，不能向上访问。所以为了麻烦直接存到调用文件的统一级目录就行了

省略号遮盖

这种方式有点老的掉牙，因为自2013年以后所有浏览器都已经支持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内核新版属性

有时候我们需要在多行文本后面添加一个省略号，怎么样添加呢？

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

说明：

1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
2. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；所以其兼容性不太好

<p class="article_synopsis">
        我们时常对城市中的建筑过目即忘，甚至你不会觉得城市与城市之间有什么不同。因为这些钢筋混泥土建筑的空间里，没有与我们内心与之呼应的东西。这些东西是一个民族几千年里凝练下来的一种审美，流淌在我们的血液里。
</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>

兼容的写法

我们为了兼容考虑可以使用伪类来达到相同的效果

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; }

完整代码实现：

<p class="synopsis">
        我们时常对城市中的建筑过目即忘，甚至你不会觉得城市与城市之间有什么不同。因为这些钢筋混泥土建筑的空间里，没有与我们内心与之呼应的东西。这些东西是一个民族几千年里凝练下来的一种审美，流淌在我们的血液里。
</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>

说明：

1. 设置line-height属性，防止超出的文字露出部分。
2. 给p::after添加定位、颜色、行高及宽度可避免文字只显示一半。
3. 由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。

适用范围：该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

关于JavaScript 方案可以去看看Clamp.js和jQuery插件-jQuery.dotdotdot

小结：

至此我们常用的css溢出变为省略号的方法基本结束了

提示：后面还有精彩敬请期待，请大家关注我的CSDN博文：侬姝沁儿，或者我的简书专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。