HTML元素内容过长时在后面添加省略标志（兼容IE和FF）——clamp.js

前言

---

 

经常写移动端页面，用习惯了CSS解决超出显示点点点的问题。 

最近一个项目是PC的，需要兼容IE和火狐，此时-webkit-line-clamp: n;就不能满足了，百度了一下，clamp.js正好满足。

 

使用方法

---

 

上手很简单：

• 单行省略

  $clamp(item,{clamp:1})

• 多行省略

  $clamp(item,{clamp:2})

• 根据有效的高度自动省略

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

• 基于固定元素高度的省略

  $clamp(item,{clamp:'100px'}

 

使用中遇到的问题

---

 

使用的时候遇到个问题：

Uncaught TypeError: Cannot read property 'webkitLineClamp' of undefined clamp.min.js:11

clamp.js的issues里找到了答案，这里记录下解决方法：

$('.clampThis').each(function(index, element) {
    $clamp(element, { clamp: 1, useNativeClamp: false });
});