单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行超出隐藏
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;//设置行数
-webkit-box-orient: vertical;
这个很方便但是不兼容IE和火狐
多行(兼容各个浏览器)//通过覆盖最后几个字的形式
p{
position:relative;
line-height:1.4em;
height:4.2em;/* 3 倍line-height 多少倍就是多少行*/
overflow:hidden;
}
.p::after {
content:"…";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 0px;///控制后面省略号的位置
}