Clamp.js插件,解决文本多行省略,兼容IE等浏览器

下载

Clamp.js项目地址:https://github.com/josephschmitt/Clamp.js

引入

<!-- 文本多行省略插件 -->
<script src="js/clamp.min.js"></script>

使用

1、 单行省略

$clamp(myHeader,{clamp:1})

2、多行省略

$clamp(myHeader,{clamp:3})

3、根据有效的高度自动省略

$clamp(myparagraph,{clamp:'auto'})

4、基于固定元素高度的省略

$clamp(myparagraph,{clamp:'35px'})

文本需要使用p标签或div标签,span不行。

// 文本多行省略,兼容IE等浏览器
<body>
<div class="container">
  <div id="content">
    8月26日晚公告称,2020年上半年实现营业收入155.41亿元,净利润64.05亿元,分别同比增长39.92%、57.88%。数字化驱动客户规模跃升自2019年在行业率先提出全面数字化转型,加码布局金融科技前沿领域,转型亮点备受行业关注。
  </div>
</div>

<script src="./js/clamp.min.js"></script>
<script>
  var module = document.getElementById("content");
  $clamp(module,{clamp:3})
</script>
</body>

效果

posted @ 2020-10-28 10:42  ZerlinM  阅读(944)  评论(0编辑  收藏  举报