扫一扫分享
Clamps 能够在html元素内容过长时在后面添加省略标志。
1、 单行省略
$clamp(myHeader,{clamp:1})
2、多行省略
$clamp(myHeader,{clamp:3})
3、根据有效的高度自动省略
$clamp(myparagraph,{clamp:'auto'})
4、基于固定元素高度的省略
$clamp(myparagraph,{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、truncationChar (String)。在HTML元素截断之后显示的字符串,默认是省略号(…)。同时支持 字符串和HTML标签。
4、 在 “truncationChar” 之前显示的 HTML 字符串。同时支持 字符串和HTML标签。
5、splitOnChars(Array) 。
6、animate (Boolean).当设置为true的时候动态的移除多余的字符,直到合适的省略效果。
手机预览