clamp.js

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的时候动态的移除多余的字符，直到合适的省略效果。

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/1201