Создание эллипсиса при переполнении текста

Question

Я искал способ добавить многоточие в текст, если это больше, чем определенное количество строк. Я не хотел использовать плагин, и я нашел чистый JS-код из другого ответа. Однако эллипсис «...» применяется к каждому элементу, даже если он не пропускает предел чисел.

HTML:

<p class="product-title">This is my product title example</p> 

CSS:

.product-title { 
    line-height: 1.4rem; 
    height: 2.8rem; 
} 

!! Я добавил высоту в два раза по высоте линии, чтобы текст переместился более чем на две строки. Если я хочу три строки, я делаю три раза высоту линии.

JS:

function dotify(element) { 
    var limit = element.offsetTop + element.offsetHeight; 
    var dots = document.createElement('span'); 
    if (element['data-inner']) 
     element.innerHTML = element['data-inner']; 
    else 
     element['data-inner'] = element.innerHTML; 
    dots.appendChild(document.createTextNode('...')); 
    element.style.overflow = 'hidden'; 
    element.appendChild(dots); 
    while (dots.offsetTop + dots.offsetHeight > limit) { 
     dots.previousSibling.data = dots.previousSibling.data 
      .replace(/\W*\w+\W*$/, '') 
    } 
} 


jQuery(".product-title").each(function() { 
    dotify(this); 
}); 

Редактировать примеры до и после:

До: Lorem Ipsum Dolor сидеть Амет, consectetur adipiscing Элит,

СЕПГ сделать eiusmod Tempor incididunt ут labore и dolore magna aliqua.

Ut enim объявление минит veniam, Quis nostrud ullamco упражнения

Laboris НИСЬ ет aliquip экс еа Commodo consequat.

После: Lorem Ipsum Dolor сидеть Амет, consectetur adipiscing Элиты,

СЕПГА сделать eiusmod TEMPOR incididunt ет Лабор и др Dolore магна aliqua ...

Answer 1

Я думаю, вы можете проверить высоту содержание перед нанесением

function dotify(element) { 
 
    if (element.clientHeight >= element.scrollHeight) { 
 
    return 
 
    } 
 
    var limit = element.offsetTop + element.offsetHeight; 
 
    var dots = document.createElement('span'); 
 
    if (element['data-inner']) { 
 
    element.innerHTML = element['data-inner']; 
 
    } else { 
 
    element['data-inner'] = element.innerHTML; 
 
    } 
 
    dots.appendChild(document.createTextNode('...')); 
 
    element.style.overflow = 'hidden'; 
 
    element.appendChild(dots); 
 
    while (dots.offsetTop + dots.offsetHeight > limit) { 
 
    dots.previousSibling.data = dots.previousSibling.data.replace(/\W*\w+\W*$/, '') 
 
    } 
 
} 
 

 

 
jQuery(".product-title").each(function() { 
 
    dotify(this); 
 
});

.product-title { 
 
    line-height: 1.4rem; 
 
    height: 2.9rem; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p id="x1" class="product-title">This is my product title example</p> 
 
<p id="x2" class="product-title">This is my product title example This is my product title example This is my product title example This is my product title example</p> 
 
<p id="x3" class="product-title">This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example</p> 
 
<p id="x4" class="product-title">This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example This is my product title example</p>