css 多行和单行文字溢出显示3个点三个点

单行

width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行
WebKit内核

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

其他浏览器，比较靠谱的办法应该就是利用相对定位在最后面加上一个省略号

p {
    position:relative;
    line-height:1.5em;
    /* 高度为需要显示的行数*行高，比如这里我们显示两行，则为3 */
    height:3em;
    overflow:hidden;
}
p:after {
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
    padding: 0 5px;
    background-color: #fff;
}

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/785.html

转载时须注明出处及本声明