javascript - Insert ellipsis after specific number of lines

Question

I am trying to display only the first 5 lines of text. The problem is that the way the text is set up is multiple <p> tags within a div, such as

<div class="myText">
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
</div>

I have looked at many answers on this site such as this one, and this one and in other places, such as http://codepen.io/martinwolf/pen/qlFdp, and https://css-tricks.com/line-clampin/, but none of them work for this case, where I would want the ellipsis after the last word on the last line even if it does not reach the end of the line, and there are multiple <p> tags.

I am using JavaScript with Angular.

Answer 1

Yes, you could use some plug-in, but this logic is not incredibly hard to write yourself. The basic notion is to keep reducing the amount of text until it fits. This sounds expensive, but in practice it works fine, and could be optimized if necessary.

// Populate an element with text so as to fit into height
function truncate(elt, content, height) {

  function getHeight(elt) { return elt.getBoundingClientRect().height; }
  function shorten(str)   { return str.slice(0, -1); }

  elt.style.height = "auto";
  elt.textContent = content;

  // Shorten the string until it fits vertically.
  while (getHeight(elt) > height && content) {
    elt.textContent = (content = shorten(content)) + '...';
  }

}

To use this:

truncate(div, "Some very long text to be truncated", 200)

To use with HTML content, adapt/extend as necessary.