Css文本超出3行自动隐藏显示省略号

_hsc

于 2020-08-14 16:10:26 发布

阅读量6.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Css 文章标签： css

本文链接：https://blog.youkuaiyun.com/heshuncheng/article/details/108006872

Css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS实现文本超出3行后自动隐藏，并显示省略号的效果。主要内容包括核心的CSS样式设置，以及通过Less预处理器扩展生成不同行数隐藏样式的技巧，同时讲解了样式在实际项目中的引用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心样式

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;

less 样式

生成show-row-1 ,show-row-2,show-row-3,show-row-4 样式

each(range(4),{
  .show-row-@{value}{
    display:-webkit-box;
    -webkit-line-clamp:@value;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
})

引用方式

<div class="show-row-1">我超级长</div>
<div class="show-row-2">我超级长我超级长我超级长我超级长我超级长</div>
<div class="show-row-3">我超级长我超级长我超级长我超级长我超级长我超级长</div>
<div class="show-row-4">我超级长我超级长我超级长我超级长</div>