html - 省略号(三个点)展开和折叠文本

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 :

如果您使用的是 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") 函数来专门添加或删除类(class)

Angular

阅读您的问题，您似乎正在使用 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>