X-Ellipsis – Native Multiline Ellipsis, Truncation and Text Capping as a HTML5 Web Component

X-Ellipsis is a custom HTML5 Web Component, enabling easy text truncation, capping and ellipsis, which can be used as a simple HTML tag, without any additional JavaScript:

[sourcecode language=”html”]
<acidjs-xellipsis cap="256" labelexpand="read more" labelcollapse="collapse">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo?
</acidjs-xellipsis>
[/sourcecode]

While playing with the demo and downloading the code, you may want to take a look at it’s simple, but powerful API.

HTML Attributes of the Tag:

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

• cap – Optional number, specifying the length at which capping should occur. Default: "128".
• labelexpand – Optional expand label. Default: "»".
• labelcollapse – Optional collapse label. Default: "«".
• expand – If set to "off", expanding will be disabled. Default: "on".

JavaScript Methods of the Tag:

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. as well as their jQuery or other libraries aliases), plus the component-specific:

• cap(string) – Manually set new capping value to the queried element.
  • JavaScript:
    document.querySelector("#text-01").cap(256);
  • jQuery:
    $("#text-01").get(0).cap(256);
• content(string) – Set new capping value to the current content of the queried element.
  • JavaScript:
    document.querySelector("#text-01").content("Lorem ipsum dolor, blah, blah, blah.");
  • jQuery:
    $("#text-01").get(0).content("Lorem ipsum dolor, blah, blah, blah.");

   

Happy text capping and make sure you check my other HTML5 Web Components experiments and demos!