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 });
});