【问题标题】：ellipsis (three dots) expand and collapse the text省略号（三个点）展开和折叠文本
【发布时间】：2019-08-16 11:29:57
【问题描述】：

我想让额外的文本三个点 (...) 省略号，当我单击这些点时，文本应该扩展和收缩。但是使用所使用的代码，文本只是收缩而不是在点击点时扩展

.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>

【问题讨论】：

您可能需要创建自定义阅读。看看这对你有没有帮助stackoverflow.com/a/39859181/4990572
请向我们展示您的 html
你能用更广泛的方式解释一下吗
跨度>

标签： html css angular

【解决方案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>

【讨论】：

【解决方案2】：

我得到了我使用的答案：

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

使用扩展变量来切换

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;
}

【讨论】：