指定行数的超出省略

最新推荐文章于 2024-07-23 14:51:29 发布

爱思考的猪

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量209

点赞数

分类专栏：前端 CSS 文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_44621394/article/details/128792779

版权

前端同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

使用text-overflow:ellipsis只能设置某一行文字的超出省略，display: -webkit-box则可以设置超出指定行数后省略。下面的例子中设置的是文字超出两行进行省略

div{
      display: -webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
      overflow: hidden;
    }
    
 <div>
 这是一行文本这是一行文本这是一行文本这是一行文本这是一行文本这是一行文本这是一行文
 是一行文本这是一行文本这是一行文本这是一行文本这是一行文本这是一行文本这是一行文
 </div>