单行文本溢出的显示
p{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
多行文本溢出的显示
1.WebKit内核浏览器解决办法
p{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
2.其他解决办法
目前没有什么CSS的属性可以直接控制多行文本的省略显示,比较靠谱的办法应该就是利用相对定位在最后面加上一个省略号了
/*多行文本溢出*/
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;
}