关于单行和多行文本溢出显示省略号的解决方案

今天研究了一下文本溢出显示省略号的方案，在网上一搜，资料很多，但是不是所有都是正确的。

单行文本溢出：

1.使用text-overflow:ellipsis;

       这种方法在除firefox的其他浏览器中都支持，但是在firefox旧版本里不支持，听说在firefox7.0+支持，具体的分界线在哪里我没测试过，所以也不太清楚。但是我用firefox19.0.2测试过是支持的。需要注意的是要设置：white-space:nowrap;/*保证单行*/overflow:hidden;text-overflow:ellipsis;

 

.container {
    width:100px;
    height:100px;
    border:1px solid #000;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

 

 

<div class="container">ldj ldj ldj ldj ldj ldj ldj ldjldj ldj ldj ldj ldj ldj ldj ldj ldjldj ldj ldj ldj ldj ldj ldj ldj ldjldj ldj ldj ldj ldj ldj ldj ldj ldjldj</div>

 

对于旧版本的firefox可以使用ellipsis.xml，把上面那句"text-overflow:ellipsis;"换成" -moz-binding:url('ellipsis.xml#ellipsis');"。需要注意的是，这个使Firefox浏览器下文字溢出省略号表示的ellipsis.xml文件要在页面的同一目录下，或是下一级目录下（我已测试），要是向上跨文件夹访问或绝对路径访问则失效。

2.使用margin负值定位，这个方法是兼容主流的浏览器的。（其实我觉得这个方法有点累赘，而且不灵活）

         原理是：当文字内容足够长时就把隐藏在上面的省略号层给挤下来了。关键就是点点点所在div层的高度的绝对值要比其margin的绝对值大那么一点点。

<div class="text_overflow_4">
    <div class="text_con">这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div> 
    <div class="text_dotted">…</div>
</div>

.text_overflow_4{
    width:24em; 
    height:1.3em;
     overflow:hidden; 
    zoom:1;
}
.text_overflow_4 .text_con{
    float:left;
    height:1.2em; 
    margin-right:3em; 
    overflow:hidden;
}
.text_overflow_4 .text_dotted{
    width:3em; 
    height:1.31em; 
    float:right; 
    margin-top:-1.3em;
}

还有其他很多的方法，如：使用jquery来判断宽度是否溢出、使用伪类:after等等

多行文本溢出：

1.使用webkit支持的-webkit-line-clamp属性，不过这个只在webkit内核的浏览器中生效

       

2.使用-o-ellipsis-lastline，这个是从opera10.60才开始有的属性，所以只在opera10.60+生效

3.使用jquery,这个方案可以实现跨浏览器。原理是通过从后向前逐个删除末尾字符，直至元素的高度小于父元素高度

 

 

 

转载于:https://www.cnblogs.com/joyho/articles/2987597.html