clamp.js 介绍
Clamps 能够在html元素 内容 过长时在后面 添加 省略标志。
使用案例:1、 单行省略
$clamp(myHeader,{clamp:1})
2、多行省略
$clamp(myHeader,{clamp:3})
3、根据有效的高度 自动 省略
$clamp(myp ara graph,{clamp:'auto'})
4、基于固定元素高度的省略
$clamp(myp ara graph,{clamp:'35px'})
$clamp 是 Clamp.js 中最为主要的 方法 ,她有两个参数。第 一个 参数代表需要限制 显示 的元素,第二个参数是相关选项的jsON对象 。
选项1、clamp(数字|字符串|’auto’)。这个选项控制何时何地去限制文本元素。第一,当选项为数字的时候,则代表应该被 显示 的行数。第二,你可以使用代表 css的值(px,em)字符串来控制 元素显示 的高度。最后,你可以使用’auto’字符串。’auto’将会尝试铺满有效的空白区域并且 自动 的限制元素使其自适应。最后 一个 参数应该在元素为股东高度的时候被使用。
2、useNativeClamp(Boolean) 是否使用原生的 -webkit-line-clamp 属性 在 支持 的浏览器中。 默 认是true 。如果你使用的是 Webkit 内核的浏览器,但是在某些情况下, 显示 不正常。你可以把这个值设置为false,使用基于js的实现方式
3、t runc ationChar (String)。在html元素截断之后 显示 的字符串, 默 认是省略号(…)。同时 支持 字符串和html 标签 。
4、 在 “t runc ationChar” 之前 显示 的 html 字符串。同时 支持 字符串和html 标签 。
5、splitOnChars(Array) 。
6、animate (Boolean).当设置为true的时候动态的移除多余的字符,直到合适的省略 效果 。
网站地址 : http://joe.sh/clamp-js
GitHub: https://github.com/josephschmitt/Clamp.js
网站描述: 在HTML元素 内容 过长时在后面 添加 省略标志
clamp.js官方网站
官方网站: http://joe.sh/clamp-js
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。