如何使用max-height和overflow添加省略號到div的內容（包括換行符）：hidden？

Question

我想添加一個省略號的內容與換行符，如果它溢出一個div與最大高度和溢出：隱藏。

我試過這樣做，但我的方法的問題是如果有兩個換行符，只有一個會顯示在輸出中。這是本小提琴鏈接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()刪除的東西，它分裂並在這兩者之間的陣列增加了一切，因此它會刪除你原來<br>的。當item（即行內容）爲空時，我看到您嘗試將它們添加回來，但當它不是空的時候，您不會將它們添加回來。

請參閱更新的小提琴：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>