欢迎光临本站

水泊博客

您现在的位置是:首页>woredpress

woredpress

css文字两行或多行显示溢出隐藏

李陌阳2020-10-29 20:59:39woredpress218来源:水泊网络

css文字两行或多行显示溢出隐藏,是个非常实用的css代码,在实际开发项目中会很常用,这里顺手记录下。

文本溢出影藏显示省略号:

1:

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

一行显示溢出省略号:

2  :

.line-clamp1 {
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 1;
 -webkit-box-orient: vertical;
}

两行显示多则显示省略号:

3  :

.line-clamp2 {
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
}


文章目录
  • 文本溢出影藏显示省略号:
  • 一行显示溢出省略号:
  • 两行显示多则显示省略号:
  • 发表评论

    评论列表(0人评论 , 218人围观)
    ☹还没有评论,来说两句吧...