Skip to main content Skip to navigation

Dotdotdot...

Truncate long pieces of text and add ellipsis at the end. Highly customisable, can be set to detect element hight and track window resizing. Requires a wrapper div around text. Can be set to target ids or classes.
See Dotdotdot..website for full documentation.

Pre-requisites

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/3.2.2/jquery.dotdotdot.js"></script>

HTML

Set a wrapper class or id for the text requiring clipping. Needs to be a div element.

<div class="box-shadow"> 
	<div class="example-clipped">
        <p>Lorem ipsum dolor sit amet, no vim natum labitur delectus, pri dicta viris labore ad. Putent impetus consequat ea sit. Mel in modo ipsum quodsi. Sea et minim putant minimum, erant salutatus his ad.<p>
        <p>Id dicam indoctum mnesarchum est, eum accumsan periculis te, ius justo lorem indoctum et. Usu veri eirmod vulputate ne, et mel tritani deleniti, has ea natum meliore. An assum tempor est. Vix oblique explicari ei, duo in habeo blandit.</p>
      </div>
    </div>

Call the plugin

Set a fucntion to detect the element and clip it once it has reached a certain height.

<script;>
jQuery(document).ready(function() {
  jQuery(".example-clipped").dotdotdot({
   // truncate text when element reaches height set below
   height: 100
  });
});
</script> 

Result

Text not clipped

Lorem ipsum dolor sit amet, no vim natum labitur delectus, pri dicta viris labore ad. Putent impetus consequat ea sit. Mel in modo ipsum quodsi. Sea et minim putant minimum, erant salutatus his ad.

Id dicam indoctum mnesarchum est, eum accumsan periculis te, ius justo lorem indoctum et. Usu veri eirmod vulputate ne, et mel tritani deleniti, has ea natum meliore. An assum tempor est. Vix oblique explicari ei, duo in habeo blandit.

Text clipped

Lorem ipsum dolor sit amet, no vim natum labitur delectus, pri dicta viris labore ad. Putent impetus consequat ea sit. Mel in modo ipsum quodsi. Sea et minim putant minimum, erant salutatus his ad.

Id dicam indoctum mnesarchum est, eum accumsan periculis te, ius justo lorem indoctum et. Usu veri eirmod vulputate ne, et mel tritani deleniti, has ea natum meliore. An assum tempor est. Vix oblique explicari ei, duo in habeo blandit.