CSS实现单行、多行文本溢出显示省略号

单行文本溢出显示省略号的实现方法：

overflow: hidden; /* 隐藏文字 */
text-overflow: ellipsis; /* 省略号 */
white-space: nowrap /* 强制不换行 */

 

多行显示省略号的实现方法：

• css 限制显示文本的行数，超出不显示

display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-line-clamp: 3; /* 限制显示文本的行数 */ /* 这是一个不规范的属性，它没有出现在 css 规范草案中 */
overflow: hidden;
text-overflow: ellipsis;

因为使用了 webkit 的 css 扩展属性，只有-webkit内核才有作用，移动端浏览器绝大部分是 WebKit 内核的，所以该方法也适用于移动端。

 

• 利用绝对定位和 padding

首先在包含文字的元素里，嵌入一个<span>...</span>，然后包含文字的元素右侧设置 padding-right 预留出省略号... 的位置, 最后利用绝对定位将...定位至右侧的 padding-right 区域

p {
    position: relative;
    height: 40px;
    width: 250px;
    line-height: 20px;
    overflow: hidden;
    padding-right: 12px;
}  
span {
    position: absolute;
    right: 0;
    bottom: 0;
} 

span 标签也可以换成伪元素 :after 来实现，原理差不多

p {
    position: relative;
    width: 240px;
    max-height: 40px;
    line-height: 20px;
    overflow: hidden;
}  
p::after {
    content: "...";  
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 32px;    
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);  
} 

 

这种方法对搜索引擎还是比较友好的，因为标题实际上并未被截取，而是局限于宽度未被显示而已。但是在内容不足设定显示行的情况下，省略号 “...” 依然会存在，并不会隐藏，可以结合 js 优化。暂时还没有想出利用 css 来实现不足显示行隐藏的办法。

 

• 使用 js

function mitulineHide(num,con){
        var contain = document.getElementById(con);
         console.log(con);
        var maxSize = num;
        var txt = contain.innerHTML;
        if(txt.length > num){
            console.log('1');
            txt = txt.substring(0,num-1) + "...";
            contain.innerHTML = txt;
        } else {
            console.log("error");
        }
}
mitulineHide(100, "element");

或

CSS 代码：

.ele {
    width: 200px;
    height: 100px;
    overflow: hidden;
}  

JS 代码：

$(".words").each(function(i){
    var divH = $(this).height();
    var $p = $("p",$(this)).eq(0);
    while($p.outerHeight() > divh) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    }
});