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

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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?

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:

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:

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


Categories and Tags

© 2006 - 2024 Martin Ivanov