首页woredpress 正文

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

1个月前 ( 10-29 ) 49 0条评论

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;
}


文章目录
  • 文本溢出影藏显示省略号:
  • 一行显示溢出省略号:
  • 两行显示多则显示省略号:
  • 文章版权及转载声明

    本文作者:李陌阳 网址:https://www.shuiponet.com/blog/43.html发布于 1个月前 ( 10-29 )
    文章转载或复制请以超链接形式并注明出处。

    发表评论

    验证码

    评论列表 (暂无评论,49人围观)参与讨论

    还没有评论,来说两句吧...

    取消
    支付宝二维码
    支付宝二维码
    微信二维码