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 });
});
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步