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

最新推荐文章于 2024-10-02 09:25:25 发布

原创最新推荐文章于 2024-10-02 09:25:25 发布 · 6.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

Css 专栏收录该内容

1 篇文章

订阅专栏

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

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

核心样式
less 样式
引用方式

核心样式

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>