文字超出省略号显示

一行

div{

    width:100px;/*一定要写*/

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

来源于 http://blog.csdn.net/u011546766/article/details/34446737

 

 

多行

google浏览器

div{

    overflow:hidden;

    text-overflow:ellipsis; 

    display:-webkit-box;

    -webkit-line-clamp:2;/*2行溢出隐藏*/

    -webkit-box-orient:vertical;

}

 

opera浏览器

div{

    overflow:hidden;

    white-space:normal;

    height:2rem;/*2行溢出隐藏*/

    text-overflow:-o-ellipsis-lastline;

}

 

全部兼容用js实现

$("div").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)(\.\.\.)?$/, "..."));
    };
});

 

来源于 http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html