溢出文本显示省略号

单行文本溢出显示省略号

需要文本定宽,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;
}

猜你喜欢

转载自blog.csdn.net/qq_35134066/article/details/85261175