jQuery dotdotdot...

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 »

What is dotdotdot

Dotdotdot is a jQuery plugin for truncating multiple line content on a webpage. It uses 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 jQuery.dotdotdot plugin, 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.

How to use the plugin

First, include all nessesary .js files in your webpage.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dotdotdot.js" type="text/javascript"></script>

Second and last, fire the plugin onDocumentReady on the element you want to truncate.

$(document).ready(function() {
   $("#element-to-truncate").dotdotdot({
      // Options go here
   });
});

Options

The plugin uses a few options that can be set in the options-object.
Available options:

$(document).ready(function() {
   $("#wrapper").dotdotdot({

      ellipsis: "\u2026 ",
      /* The text to add as ellipsis. */

      truncate: "word",
      /* How to truncate the text: By "node", "word" or "letter". */

      keep: null,
      /* jQuery-selector for elements to keep after the ellipsis. */

      watch: "window",
      /* Whether to update the ellipsis: 
         true: Monitors the wrapper width and height.
         "window": Monitors the window width and height.
      */

      tolerance: 0
      /* Deviation for the measured wrapper height. */
   });
});

API

After the plugin is fired, a series of methods is available through the API, which is stored in the "dotdotdot" data-attribute.
Available methods:

$(document).ready(function() {
   var API = $("#wrapper").dotdotdot({
      // Options go here
   }).data( "dotdotdot" );

   API.getInstance();
   /* Returns the Class instance. */

   API.truncate();
   /* Starts the truncate process. */

   API.restore();
   /* Restores the original content. */

   API.destroy();
   /* Completely restores the wrapper to its pre-init state. */

  API.watch();
  /* Starts monitoring the wrapper or window width and height.  */

  API.unwatch();
  /* Stops monitoring the wrapper or window width and height. */
      
});

Download

The jQuery.dotdotdot 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 jQuery.dotdotdot plugin is suitable for your project. You can do this by downloading the free version and purchasing a license later on.

Single website license $5
  • Future updates
  • 1 Commercial project
  • Community support
Buy This license allows the jQuery.dotdotdot plugin to be used by you or one client, in a single commercial end product.
Multiple websites license $35
  • Future updates
  • Unlimited commercial projects
  • 1 Year premium support
Buy This license allows the jQuery.dotdotdot plugin to be used by you or your clients, in an unlimited number of commercial end products.

Paid plugins, themes and templates

By purchasing ONE "Multiple websites license", you are allowed to include the jQuery.dotdotdot 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.

CDN

Use a CDN to host the files:
cdnjs.com/libraries/jQuery.dotdotdot

NPM

Install the plugin with NPM:
npm install jquery.dotdotdot

GitHub

Download directly from the Github repository.