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的内容如下：

"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>

    
这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。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浏览器及移动端；所以其兼容性不太好

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