Truncate multiple line content:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Read more »
Dotdotdot is a javascript plugin for truncating multiple line content on a webpage. It adds an ellipsis to indicate that there is more text than currently visible. Optionally, the plugin can keep a "read more" anchor visible at the end of the content, after the ellipsis.
When using the dotdotdot plugin to truncate HTML, you don't need to worry about your HTML markup, the plugin knows its way around most elements. It's responsive, so go ahead and resize your browser, the ellipsis will update on the fly.
The dotdotdot javascript plugin is free to use for personal or non-profit usage. You can purchase a license if you want to use it in a commercial project (including plugins, themes and templates you plan to sell).
Before purchasing a license, please make sure the plugin is suitable for your project. You can do this by downloading the free version and purchasing a license later on.
This license allows the dotdotdot javascript plugin to be used by you or one client, in a single commercial end product.
BuyThis license allows the dotdotdot javascript plugin to be used by you or your clients, in an unlimited number of commercial end products.
BuyBy purchasing ONE "Multiple websites license", you are allowed to include the dotdotdot javascript plugin in ONE product (for example a plugin, theme or template) for sale. Customers and users of your product do not need to purchase their own license.
Use a CDN to host the files:
cdnjs.com/libraries/jQuery.dotdotdot
Install the plugin with NPM:
npm i dotdotdot-js
Download directly from the Github repository.
First, include the dotdotdot.js files in your webpage.
<script src="dotdotdot.js"></script>
Second and last, create an instance with the element you want to truncate.
document.addEventListener( "DOMContentLoaded", () => {
let wrapper = document.querySelector( "#element-to-truncate" );
let options = {
// Options go here
};
new Dotdotdot( wrapper, options );
});
The plugin uses a few options that can be set in the options-object:
document.addEventListener( "DOMContentLoaded", () => {
new Dotdotdot( wrapper, {
callback: function( isTruncated ) {},
/* Function invoked after truncating the text.
Inside this function, "this" refers to the wrapper. */
ellipsis: "\u2026 ",
/* The text to add as ellipsis. */
height: null,
/* The (max-)height for the wrapper:
null: measure the CSS (max-)height ones;
a number: sets a specific height in pixels;
"watch": re-measures the CSS (max-)height in the "watch". */
keep: null,
/* Query selector for elements to keep after the ellipsis. */
tolerance: 0
/* Deviation for the measured wrapper height. */
truncate: "word",
/* How to truncate the text: "node", "word" or "letter". */
watch: "window",
/* Whether to update the ellipsis:
true: Monitors the wrapper width and height;
"window": Monitors the window width and height. */
});
});
After the plugin is fired, a series of methods is available through the API:
document.addEventListener( "DOMContentLoaded", () => {
let dot = new Dotdotdot( wrapper, options );
dot.API.getInstance();
/* Returns the Class instance. */
dot.API.truncate();
/* Starts the truncate process. */
dot.API.restore();
/* Restores the original content. */
dot.API.destroy();
/* Completely restores the wrapper to its pre-init state. */
dot.API.watch();
/* Starts monitoring the wrapper or window width and height. */
dot.API.unwatch();
/* Stops monitoring the wrapper or window width and height. */
});
The dotdotdot javascript plugin targets modern browsers that support ES5, meaning Internet Explorer 10 and earlier are not supported. For Internet Explorer 11, you''ll need some polyfills. If you need support for Internet Explorer 9 or 10, use the legacy (jQuery) version: version 3.2.3.
dotdotdot
Truncate to readable pathnames:
dotdotdot
Toggle full story:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.