单行文本溢出显示省略号
需要文本定宽,overflow设置溢出文本不显示,white-space处理元素内的空白,这里是设置不换行,text-overflow设置文本溢出时的处理,这里是显示省略号。
p {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
webkit多行文本溢出显示省略号
需要文本定宽,-webkit-line-clamp用来设置文本显示的行数,这种方法只适用于webkit内核的浏览器
还有其他的类似伪类或者定位添加的省略号但是都有点问题,大家可以尝试着去找找插件。
p{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}