Truncate paragraphs by line not characters

Question

I have multiple items in a div with paragraphs and I would like to truncate them to 2 lines. I have tried to truncate using the height but it results in cut off words. I can't use characters because in some cases the words are long and get pushed to a new line.

I am trying to work with getClientRects() as you'll see in the fiddle below. Also note that I can't use any plugins for the project I am working on.

I found this example on another post: Working Truncate from stackoverflow post

My Fiddle: JS Fiddle

  var lines = $(".truncate")[0].getClientRects();

  var divHeight = 0;

  for (var i=0, max = 2; i < max; i++)
        divHeight += lines[i].bottom - lines[i].top;

  divHeight += i;
  $(".truncate").height(divHeight);

Here's a page from css tricks of ideas. Originally from 2013 but updated in 09/2018. https://css-tricks.com/line-clampin/ — ourmandave, Jan 11 '19 at 01:04

Ouroborus · Accepted Answer · 2019-01-11T04:38:18.687

There's a number of issues.

The code you're trying to work from takes advantage of a quirk related to display: inline but you don't set display: inline, instead leaving .truncate at the browser default of display: block.
ready isn't a real event and jQuery no longer fakes it when using .on('ready', ...) so your code never runs.
jQuery's .height() requires that the argument be in the form of a CSS height value. This means you need to use something that results in, for example, '50px' rather than just 50.
height is ignored on inline elements so it'll have to be set on the outer element. The code you were working from did this but you didn't follow it.
Your code assumes that the number of lines will always be two or more.
overflow: hidden isn't set so the text itself will push outside its container even if the container was shortened.

All together, your code should look something like this instead:

.item {
  width: 400px;
  margin: 20px;
  display: inline-block;
  overflow: hidden;
  box-sizing: content-box;
}
.truncate {
  display:inline;
}

$(document).ready( function(){
    var lines = $(".truncate")[0].getClientRects();
    var divHeight = 0;
    var max = lines.length >= 2 ? 2 : lines.length;

    for (var i=0; i < max; i++) {
        divHeight += lines[i].bottom - lines[i].top;
    }

    divHeight += i;

    $(".item").height(divHeight + 'px');
});

JSFiddle

Thanks so much! This works great! How would I modify this to add an ellipses to the items that were truncated? — Mandalina, Jan 11 '19 at 18:20
@Mandalina Usually you'd use `text-overflow: ellipsis` on the element wrapping the text. However your scenario would prevent that from working. You may be better off asking how to accomplish this as a separate stackoverflow question. — Ouroborus, Jan 11 '19 at 20:03
Hey @Ouroborus I tried that but it only seemed to work for a single line truncate. — Mandalina, Jan 11 '19 at 20:07

score 0 · Answer 2 · answered Jan 11 '19 at 01:21

Using the css answer from css-tricks (https://css-tricks.com/line-clampin/) assuming you know the line-height.

.item {
  width: 400px;
  margin: 20px;
  overflow: hidden;
}

.fade {
  position: relative;
  height: 2.4em; /* exactly two lines */
}

  <div class="item fade">
    
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    
  </div>

  <div class="item fade">
   
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

Truncate paragraphs by line not characters

2 Answers2