Hinzufügen von Ellipsis in der letzten Zeile jedes Absatzes fester Höhe mit Überlauf-y versteckt

Question

Ich habe etwa 10 Absatz der Beschreibungstext, hat feste Höhe mit Text-Überlauf y: versteckt.

Ich habe JQuery-Skript hinzugefügt, um Ellipsis in der 'letzten Zeile' von 'jedem Absatz' hinzuzufügen.

Das Skript funktioniert jedoch nur für den ersten Absatz des Beschreibungstextes. Wie kann ich es für die anderen Abschnitte des Textes funktioniert?

<div class="description" style="height:85px; overflow-y:hidden;" itemprop="description"> 
    <a id="a" href="{{ product.url | within: collection }}" itemprop="url"> 
    {{ product.description| strip_html }} 
    </a> 
</div> 

<script> 
    var $p = $('.description #a'); 
    var divh = $('.description').height(); 
    while ($p.outerHeight() > divh) { 
    $p.text(function (index, text) { 
    return text.replace(/\W*\s(\S)*$/, '...'); 
    }); 
} 
</script> 

Answer 1

Werfen Sie es einfach in eine Schleife.

$('.description #a').each(function() { 
    var $p = $(this); 
    var divh = $('.description').height(); 
    while ($p.outerHeight() > divh) { 
    $p.text(function (index, text) { 
     return text.replace(/\W*\s(\S)*$/, '...'); 
    }); 
    } 
}); 

Dies setzt voraus, alle haben Ihre divs die gleiche Klasse und Ihre Anker haben die gleiche ID. Wenn Sie es mehr Generika machen müssen nur tun:

$('div a').each(function() { 
    //Rest of code here 
}); 

https://jsfiddle.net/mewcg3zo/1/