How to fix div height and cut down extra text from it - html

Question

I am using bootstrap cards to display my content. I want every bootstrap card height to be equal. Everything else is fine but issue comes when I display discription as it is of variable length.
Sometimes it occupies two lines and sometimes three.
I want to fix description div height and cut down extra text from it.
Note Card are being displayed through loop
This is what I tried:
$('address').height(30);
var txt= $('address').text();
if(txt.length > 155)
$('address ').text(txt.substring(0,50) + '.....');
This is working perfectly fine for one card. But when there are multiple cards running in loop, same description text appears along every card due to this line: var txt= $('address').text();
How to make it work separately for each card?

Answer 1

Your current select is targetting all the address element. You need to filter out the elements based on if condition. You can use jquery filter function for this.
Then iterate over those objects and modify the text.
var $addressToChange= $('address').filter(function(){
return $(this).text().length > 155;
});
$addressToChange.each(function(){
$(this).text($(this).text()..substring(0,50) + '.....')
})

Answer 2

I am thankful to #Milind Anantwar for his answer as his answer gave me a clue. I little modify his answer and achieved my desired result by using this piece of code:
$('address').height(40);
$('address').each(function(i){
if ($(this).text().length > 40)
{
$(this).text($(this).text().substring(0,50) + '.....')
}
});