多行文本溢出省略号显示

1、单行文本溢出

 p {
            overflow : hidden;
            text-overflow: ellipsis;
            white-space:nowrap;
        }

2、多行文本溢出——单纯只用css方法只有用非标准样式且只兼容webkit内核或者opera浏览器

2.1—— -webkit-line-clamp属性

 p {
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

2.2——-o-ellipsis-lastline属性

p {
    overflow: hidden;
    white-space: normal;
    height: 3em;
    text-overflow: -o-ellipsis-lastline;
}

3、跨浏览器兼容方法——jquery

原理：通过从后向前逐个删除末尾字符，直至元素的高度小于父元素高度，之后用省略号代替所有字符

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

多行文本溢出省略号显示

相关推荐