I'm trying to add execute this code which adds an elipsis at the end of the text when it overflows:
var ph=$('.txt-entries .txt-entries-wrap');
var p=$('.txt-entries .txt-entries-wrap p');
var divh=$('.txt-entries').height();
while ($(ph).outerHeight()>divh) {
$(p).text(function (index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
adapted from this thread Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?
To several div elements, but when I place it within an each loop it causes it to crash. Here is the HTML:
<div class="txt-block">
<div class="txt-entries">
<div class="txt-entries-wrap">
<h2>Lorem ipsum</h2>
<p class="copy">Lorem ipsum</p>
</div>
</div>
<div class="cta-aligner">
<a class="cta-2" href="#">
Lorem ipsum
</a>
</div>
</div>
<div class="txt-block">
<div class="txt-entries">
<div class="txt-entries-wrap">
<h2>Lorem ipsum</h2>
<p class="copy">Lorem ipsum</p>
</div>
</div>
<div class="cta-aligner">
<a class="cta-2" href="#">
Lorem ipsum
</a>
</div>
</div>
How can I execute it for all .txt-block
elements?