многоточие (три точки) развернуть и свернуть текст

Question

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

.overflow{
       display:inline-block;
       width:180px;
       white-space: nowrap;
       overflow:hidden !important;
       text-overflow: ellipsis;
   }

HTML Code

 <div class="overflow" innerHTML="{{ post.review_Text | highlighter : reviewName}}"></div>

Answer 1

Применение многоточия

Использование Bootstrap:

Если вы используете Bootstrap, вы можете применить класс text-truncate для добавления многоточия к любому тексту, например:

<span id="ellipsis-ex" class="d-inline-block text-truncate" style="max-width: 150px;">
    Praeterea iter est quasdam res quas ex communi.
</span>

Используя простой CSS:

Иначе, вы можете определить соответствующий класс для генерации многоточия, как вы упомянули в вопросе:

.text-truncate {
   display: inline-block;
   max-width: 150px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

Результат:

.text-truncate {
  display: inline-block;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<span class="text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

Переключение многоточия

Использование обычного JS:

Чтобы переключить класс с использованием чистого JS, используйте

var element = document.querySelector("ellipsis-ex");
element.classList.toggle("text-truncate");

Вы также можете использовать функции classList.add("#ellipsis-ex") и classList.remove("ellipsis-ex"), чтобы специально добавить или удалить класс

Angular

Читая ваш вопрос, кажется, вы работаете сТаким образом, вы можете использовать встроенную директиву class для переключения класса в самом шаблоне.

<!-- toggleEllipses is a boolean indicating ellipsis status -->
<span id="ellipsis-ex" [class.text-truncate]="toggleEllipses" style="max-width: 150px;">
    Praeterea iter est quasdam res quas ex communi.
</span>

Результат:

var element = document.querySelector("#ellipsis-ex");

function toggleEllipsis() {
  element.classList.toggle("text-truncate");
}

.text-truncate {
  display: inline-block;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<span id="ellipsis-ex" class="text-truncate" style="max-width: 150px;" onclick="toggleEllipsis()">
  Praeterea iter est quasdam res quas ex communi.
</span>

Answer 2

Я получил ответ, который использовал:

<div [class.overflow]="isExpand" innerHTML="{{ post.review_Text | highlighter : 
reviewName}}" (click)="isExpandToggle()"></div>

использовал переменную раскрытия для переключения

isExpand:boolean=true;

isExpandToggle(){
   this.isExpand=!this.isExpand;
}

overFlow css class

.overflow{
    display:inline-block;
    width:380px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}