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:

<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?

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:
    • jQuery:
  • 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!



Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s