Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions README.markdown
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Clamps (ie. cuts off) an HTML element's content by adding ellipsis to it if the
Clamps (ie. cuts off) an HTML element's content by adding ellipsis to it if the
content inside is too long.


Expand All @@ -25,13 +25,13 @@ Object with options in JSON notation.

# Options

**clamp** _(Number | String | 'auto')_. This controls where and when to clamp the
**clamp** _(Number | String | 'auto')_. This controls where and when to clamp the
text of an element. Submitting a number controls the number of lines that should
be displayed. Second, you can submit a CSS value (in px or em) that controls the
height of the element as a String. Finally, you can submit the word 'auto' as a string.
Auto will try to fill up the available space with the content and then automatically
clamp once content no longer fits. This last option should only be set if a static
height is being set on the element elsewhere (such as through CSS) otherwise no
clamp once content no longer fits. This last option should only be set if a static
height is being set on the element elsewhere (such as through CSS) otherwise no
clamping will be done.

**useNativeClamp** _(Boolean)_. Enables or disables using the native -webkit-line-clamp
Expand All @@ -46,14 +46,16 @@ after truncation is performed. This defaults to an ellipsis (…).
This is useful if you'd like to add a "Read more" link or some such thing at the end of
your clamped node.

**onTruncate** _(Function)_. A function called only when text is truncated programmatically.

**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
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.

Expand Down
4 changes: 3 additions & 1 deletion clamp.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
splitOnChars: options.splitOnChars || ['.', '-', '–', '—', ' '], //Split on sentences (periods), hypens, en-dashes, em-dashes, and words (spaces).
animate: options.animate || false,
truncationChar: options.truncationChar || '…',
truncationHTML: options.truncationHTML
truncationHTML: options.truncationHTML,
onTruncate: options.onTruncate || Function.prototype
},

sty = element.style,
Expand Down Expand Up @@ -258,6 +259,7 @@
var height = getMaxHeight(clampValue);
if (height <= element.clientHeight) {
clampedText = truncate(getLastChild(element), height);
opt.onTruncate();
}
}

Expand Down