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

2024年5月20日 182次阅读 来源: _hsc

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

核心样式

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>
    原文作者：_hsc
    原文地址: https://blog.csdn.net/heshuncheng/article/details/108006872
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞