Отменить SUBSTR по наведению

Question

У меня есть список:

<section class="last-content"> 
    <ul> 
     <li> 
     <img src="temp/person-1.png" alt=""> 
     <span class="name">Natali</span> 
     <span class="post">director</span> 
     <span class="text">Text text text text text text text text text text text </span> 
     <a href="#?" class="more">more</a> 
     </li> 
    </ul> 
</section> 

Несколько элементов (Li).

По умолчанию код JQuery:

$(".last-content .text").each(function(a){ 
     len=$(this).text().length; 

     if(len>107) 
     { 
     $(this).text($(this).text().substr(0,107)+'...'); 
     } 

    }); 

    $('.last-content ul li').on('hover', function() { 

    .......??? 
    .text must be full 

    }); 

Этот код делает текст селектор (.text) короткий.

После того, как функция «hover» должна сделать полный текстовый селектор (.text).

Как это сделать? Спасибо.

Answer 1

Не делайте это так!

Прежде всего, когда вы заменяете текстовое содержимое элемента, вы теряете ссылку на оригинал. Вам нужно было бы как-то сохранить его, чтобы вернуть его обратно.

Но CSS имеет функцию означало добавить (...), когда текст переполняет заданный размер, как это:

span.text:not(:hover) { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    width: 50px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<section class="last-content"> 
 
    <ul> 
 
     <li> 
 
     <img src="temp/person-1.png" alt=""> 
 
     <span class="name">Natali</span> 
 
     <span class="post">director</span> 
 
     <span class="text">Text text text text text text text text text text text </span> 
 
     <a href="#?" class="more">more</a> 
 
     </li> 
 
    </ul> 
 
</section>

Answer 2

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

Например:

<span class="text">Text too long_bla bla</span> 

будет

<span class='text'> Text to...<span class='cut'>o long bla bla </span></span>