html单行不换行溢出部分以省略号显示,多行文本溢出以省略号显示

单行文本不换行,溢出以…省略

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本换行,溢出以…省略号显示

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

相关解释:

常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
点击查看 text-overflow属性文档：

跨浏览器兼容的方案

p {
    
    
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    
    
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}