逐行截断段落而不是字符

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);

Answer 1

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

Answer 2

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>