Multy-line Ellipses Overflow

A solution to clip text in jQuery which spans over several lines, and use an ellipses.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="text">
Old men tend to forget what thought was
</div>

 <!-- Working Cross-browser Solution

This is a jQuery approach to limiting a body of text to n words, and end with an ellipsis -->

CSS

.text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}

JavaScript

setTimeout(function()
{
  $('.text').html($('.text').html().trim().split(' ',25).join(' ') + "...");
},500); // Delayed for example only. 


/* The code above first gets the inner html of any element 
 * with the .text class (should always be text, of course)
 * then trims off any leading or trailing whitespace
 * then splits the text into an array with a limit of 20 indices
 * which you can alter depending on your needs.
 * Then it joins the new array with single spaces, and fills 
 * the .text element with the final output, plus ellipsis.
 */