How to add an ellipsis to contents(including line breaks) of a div with max-height and overflow: hidden?

Question

I want to add an ellipsis at the end of contents with line breaks if it overflows a div with max-height and overflow: hidden.

I have tried to do, but the problem with my approach is if there are two line breaks only one will be shown in the output. This is this the fiddle link https://jsfiddle.net/AkshayaKT/qg8yurt5/

var ellipsesText = "...";

$( '.card-content' ).each (function () {

    var content    = $( this ).html(),
        divheight  = $( this ).height(),
        lineheight = $( this ).css( 'line-height' ).replace( "px", "" ),
        lines      = Math.round( divheight / parseInt( lineheight ) ),
        eachLines  = content.split( /<br>/ );

    if ( lines >= 3 ) {
    
        var replaceTxt = "";
        
        $.each( eachLines, function( index, item ) {
        
            if ( index <= 2 ) {
                if ( item == "" ) {
                    replaceTxt = replaceTxt + '<br>';
                } else {
                    replaceTxt = replaceTxt + item;
                }
            }
            
        } );
        
        replaceTxt = replaceTxt + ellipsesText;
        
        $( this ).html( replaceTxt );
        
    }
    
} );

body {
  box-sizing: border-box;
}

.card-content {
  font-size: 15px;
  font-weight: 400;
  color: #333;
  max-height: 63px;
  margin: 10px;
  line-height: 21px;
  overflow: hidden;
  border: 1px solid;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="card-content">What is Lorem Ipsum?<br><br><br><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</div>
<div class="card-content">What is Lorem Ipsum?<br><br>hi</div>

Answer 1

split() removes the thing that it splits on and adds everything in between to an array, therefore it will remove your original <br>'s. I see you're trying to add them back in when the item (i.e. line content) is empty, but you're not adding them back in when it's not empty.

See the updated fiddle: http://jsfiddle.net/qg8yurt5/6/

var ellipsesText = "...";
$('.card-content').each(function() {
  var content = $(this).html(),
    divheight = $(this).height(),
    lineheight = $(this).css('line-height').replace("px", ""),
    lines = Math.round(divheight / parseInt(lineheight)),
    eachLines = content.split(/<br>/);

  if (lines >= 3) {
    var replaceTxt = "";
    $.each(eachLines, function(index, item) {
      if (index <= 2) {
        replaceTxt = replaceTxt + item;
        if (index < 2) {
          replaceTxt = replaceTxt + '<br>';
        }
      }
    })
    replaceTxt = replaceTxt + ellipsesText;
    $(this).html(replaceTxt);
  }
});

body {
  box-sizing: border-box;
}

.card-content {
  font-size: 15px;
  font-weight: 400;
  color: #333;
  max-height: 63px;
  margin: 10px;
  line-height: 21px;
  overflow: hidden;
  border: 1px solid;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-content">What is Lorem Ipsum?
  <br>
  <br>
  <br>
  <br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</div>
<div class="card-content">What is Lorem Ipsum?
  <br>
  <br>hi</div>
<div class="card-content">No matter what you do.<br>I work just fine<br>And will cut off after 3 lines, and put ellipses on the 3rd line >>> <br>You can't see me</div>