clamp.js 的使用---超出省略 （翻译）

更多内容： http://blog.yuhai.win

参考地址：
1、http://joe.sh/clamp-js
2、https://github.com/josephschmitt/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) 。Determines what characters to use to chunk an element into smaller pieces. Version 0.1 of Clamp.js would always remove each individual character to check for fit. With v0.2, you now have an option to pass a list of characters it can use. For example, it you pass an array of [‘.’, ‘,’, ’ ‘] then it will first remove sentences, then remove comma-phrases, and remove words, and finally remove individual characters to try and find the correct height. This will lead to increased performance and less looping when removing larger pieces of text (such as in paragraphs). The default is set to remove sentences (periods), hypens, en-dashes, em-dashes, and finally words (spaces). Removing by character is always enabled as the last attempt no matter what is submitted in the array.

6、animate (Boolean).当设置为true的时候动态的移除多余的字符，直到合适的省略效果。