three-dots.js

An easy to use and fast ellipsis plugin with no dependencies

Introducing

This plugin handles the situations when the text overflows its container. three-dots.js truncates the text and adds ellipsis at the end to indicate that there is more text than it is currently visible. When the size of a window is changing, the plugin adjusts the text inside the container on the fly, so that your site always has the best look! To see the plugin in action visit this showcase

Dependencies

No dependencies

Installing

You can download three-dots.js manually to you project or you can install with npm:

npm install three-dots.js

or bower:

bower install three-dots.js

Usage

First of all, you'll want to link the three-dots.js or three-dots.min.js file to your web-page:

<script type="text/javascript" src="js/three-dots.js"></script>

To initiate the plugin you might add some additional class name to those containers which you want to give for the control to three-dots.js. Suppose, it is a .three-dots-container class name:

<div class="three-dots-container">
	
	//some text inside the container
	
</div>

Then you can set the max-height of your containers in css:

.three-dots-container {
	max-height: 200px;
}

Finally, you just have to add next code to your JavaScript file:

threeDots("three-dots-container");

Adding of a "Read more" link after the text

To tell the plugin to add a "Read more" link to the end of your text you can just add the link into your container (after the main text)

<div class="three-dots-container">
	
	//some text inside the container
	
	<a href="some-url.html" class="some classes if you wish">Read more (or any other text)</a>
	
</div>

and call the threeDots function with the second argument, wich should be true (or any other non-empty value):

threeDots("three-dots-container", true);

You've done it! Enjoy of your page with neat ellipsed containers.

License

This project is licensed under the MIT License - see the LICENSE.md file for details