Проблема многострочного усечения текста

Question

В настоящее время у меня есть фрагмент jQuery, который успешно обрезает мой текст, когда дочерняя строка больше, чем родительский контейнер (см. Ниже).

var initial = $('.js-text').text(); 
$('.js-text').text(initial); 
while($('.js-text').outerHeight() > $('.js-text-truncator').height()) { 
    $('.js-text').text(function(index, text) { 
    return text.replace(/\W*\s(\S)*$/, '...'); 
    }); 
} 

Я использовал семантику у меня есть, как я планировал использовать этот небольшой компонент JQuery в более чем одном месте в существующей разметке так:

<div class="existing-first-div-container js-text-truncator"> 
    <p class="existing-first-string js-text">The quick brown fox</p> 
</div> 
<div class="existing-second-div-container js-text-truncator"> 
    <p class="existing-second-string js-text"> jumped over the lazy red dog.</p> 
</div> 

Kudos, если вы дочитали до этого и уже догадался о моей проблеме btw ...

Так что проблема в том, что мой jQuery хранит текст, но он хранит весь текст. Таким образом, оба этих существующих divs усекаются, но оба заканчивают чтение: «Быстрая коричневая лиса перепрыгнула через ленивую красную собаку». а не в первом чтении «Быстрая коричневая лиса» и во втором чтении «перепрыгнул через ленивую красную собаку».

Возможно ли использовать мой js-text-truncator в качестве расширения моей разметки так, как я предполагаю, без сохранения всех усеченных текстовых экземпляров сразу?

Answer 1

.text ясно заявляет

Получить комбинированных текстового содержимого каждого элемента в наборе соответствующих элементов, в том числе их потомков, или установить текстовое содержимое соответствующих элементов.

После того, как у вас есть набор элементов с .js-text, сделать .each на них, и получить, усечение и установите .text отдельно.

Если вы хотите, чтобы он повторно запускался при изменении размеров окна, я советую вам сделать это через таймаут (так что код запускается один раз после того, как окно перестает изменяться в течение как минимум 400 мс). Без этого обходного пути он, как правило, сильно нагружен.

var resizeTimeout = false; 
$(window).resize(onWindowResize); // bind resize event. 

trimAllText(); //run once at start. 

function onWindowResize() { 
    if(resizeTimeout){ 
     clearTimeout(resizeTimeout); 
    } 
    resizeTimeout = setTimeout(function(e){ 
     resizeTimeout = false; 

     // this is code that is ran at the "end" of a resize. 
     trimAllText(); 
    }, 400); 
} 

function trimAllText(){ 
    var initialElements = $('.js-text'); 
    initialElements.each(function(){ 
    var elem = $(this); 
    while(elem.outerHeight() > elem.closest('.js-text-truncator').height()) { 
     elem.text(function(index, text) { 
     return text.replace(/\W*\s(\S)*$/, '...'); 
     }); 
    }); 
    }); 
}