Native Multiline Ellipsis
AcidJs.XEllipsis a HTML5 Web Component, enabling multiline text ellipsis, capping and toggling of its content with a bunch of useful methods and attributes. Everything out of the box, as simple as:
<acidjs-xellipsis
cap="256"
labelexpand="read more"
labelcollapse="collapse">
Your long content, that needs capping/ellipsis...
</acidjs-xellipsis>
Demo
Default Functionality
Custom Cap Value and Toggle Labels
Custom Cap Value, Disabled Expand/Collapse
Register Mozilla's X-Tags
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<script src="AcidJs.XEllipsis/lib/x-tag-components.js"></script>
Register the Component on the Page via HTML5 @import
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<link rel="import" href="AcidJs.XEllipsis/classes/XEllipsis.html" />
HTML Attributes
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
JavaScript API: Methods, Getters and Setters
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
Usage and Code Insight
<h4>Default Functionality</h4>
<acidjs-xellipsis>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</acidjs-xellipsis>
<h4>Custom Cap Value and Toggle Labels</h4>
<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 inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi tempora incidunt
ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum
fugiat quo voluptas nulla pariatur?
</acidjs-xellipsis>
<h4>Custom Cap Value, Disabled Expand/Collapse</h4>
<acidjs-xellipsis cap="512" expand="off">
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos
dolores et quas molestias excepturi sint occaecati cupiditate
non provident, similique sunt in culpa qui officia deserunt
mollitia animi, id est laborum et dolorum fuga. Et harum quidem
rerum facilis est et expedita distinctio. Nam libero tempore,
cum soluta nobis est eligendi optio cumque nihil impedit quo
minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus. Temporibus autem quibusdam
et aut officiis debitis aut rerum necessitatibus saepe eveniet
ut et voluptates repudiandae sint et molestiae non recusandae.
Itaque earum rerum hic tenetur a sapiente delectus, ut aut
reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat.
</acidjs-xellipsis>
/*
* X-Ellipsis HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
* More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
* @author Martin Ivanov
* @url developer website: http://wemakesites.net/
* @url developer twitter: https://twitter.com/#!/wemakesitesnet
* @url developer blog http://acidmartin.wordpress.com/
**/
acidjs-xellipsis .acidjs-xellipsis-controls,
acidjs-xellipsis .acidjs-xellipsis-controls *
{
display: inline;
}
acidjs-xellipsis
{
display: block;
margin: 1em 0;
}
acidjs-xellipsis .acidjs-xellipsis-controls span[hidden],
acidjs-xellipsis[expand="off"] .acidjs-xellipsis-controls-toggle
{
display: none;
}
acidjs-xellipsis .acidjs-xellipsis-controls-toggle
{
color: #0091c0;
cursor: pointer;
}
acidjs-xellipsis .acidjs-xellipsis-controls-toggle:hover
{
color: #e44d26;
}
acidjs-xellipsis[expand="off"]::after,
acidjs-xellipsis .acidjs-xellipsis-controls-toggle::before
{
content: "...\00a0";
}
acidjs-xellipsis .acidjs-xellipsis-controls-hidden-content:not([hidden]) + .acidjs-xellipsis-controls-toggle::before
{
content: "";
}