省略號（三個點）展開和折疊文本

Question

我想讓額外的文本變成三個點 (...) 省略號，當我點擊這些點時，文本應該展開和收縮。 但是使用代碼時，文本只會收縮但不會在點擊點時擴展

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

HTML代碼

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

Answer 1

應用省略號

使用引導程序：

如果您使用的是 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>

使用 expand 變量來切換

isExpand:boolean=true;

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

overFlow css 類

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