前言

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

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

浏览器支持：

通过浏览器支持表我们可以看出，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种方案，分别是：

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

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前端。如有意见可以进行评论，每一条评论我都会认真对待。