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?
</acidjs-xellipsis>

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!

x-ellipsis

Advertisements

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