一行

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-bos;

    -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

文字超出省略号显示