jQuery limit div characters to 90, когда есть определенный класс

Question

Я пытаюсь ограничить символы элемента до 90 слов. Но когда нажата кнопка «Показать больше», она должна удалить предел.

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

Моя попытка это:

 <header> 
      <h1>Heading Goes Here</h1> 
      <p class="jumbo-p non-exp"> 
       The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. 
      </p> 
      <a href="#" class="more1">more</a> 
     </header> 

CSS-:

 .jumbo-p{display: inline-block; height: 20px; overflow: hidden;} 
    .more1 {position: relative; left: 2px; top: -21px;} 
    .jumbo-p.expanded+.more1 {display: none} 
    .jumbo-p.expanded {height: auto;} 

JQuery, чтобы сделать его работу:

 $(".non-exp").text(function(index, currentText) { 
      return currentText.substr(0, 90) + '...'; 
     }); 
     $(document).on('click', '.more1', function(event) { 
      event.preventDefault(); 
      $('.jumbo-p').toggleClass('expanded'); 
      $('.jumbo-p').removeClass('non-exp'); 
     }); 

Это ставит ограничение на DIV, но что предел не удаляется при удалении класса. Пожалуйста помоги.

Answer 1

Сохраните исходный текст в переменной и вставьте его в клик.

var text = $(".non-exp").text();  
$(".non-exp").text(function(index, currentText) { 
     return currentText.substr(0, 90) + '...'; 
    }); 
$(document).on('click', '.more1', function(event) { 
    event.preventDefault(); 
    $(".non-exp").text(text); 
    $('.jumbo-p').toggleClass('expanded'); 
    $('.jumbo-p').removeClass('non-exp'); 
}); 

Answer 2

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

Одна вещь, я видел, как ты сказал, что

текст переполнения будет ограничивать его на основе ширины Див. я хочу, чтобы ограничить его на основе длины символов

Вы можете установить ширину Div в зависимости от количества символов, как этот

width: 90ch; 

Тем не менее, могут быть некоторые проблемы совместимости браузера. См. Больше на Specify width in *characters*