CODEWITHSUNDEEP
htmlcssangular
V_for_Vj
V_for_Vj

Reputation: 894

ellipsis (three dots) expand and collapse the text

I want to make the extra text three dots (...) ellipsis and when i click the dots the text should expand and contract. But with the code used the text is only contracted but not expanding on click of dots

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

Upvotes: 4

Views: 24326

Answers (2)

Burhan
Burhan

Reputation: 790

Applying the ellipsis

Using Bootstrap:

If you are using Bootstrap, you can apply the text-truncate class to add an ellipsis to any text, like so:

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

Using plain CSS:

Else, you can define the appropriate class to generate the ellipsis as you've mentioned in the question:

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

Result:

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

Toggling the ellipsis

Using plain JS:

To toggle the class using pure JS, use

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

You can also use the classList.add("#ellipsis-ex") and classList.remove("ellipsis-ex") functions to specifically add or remove the class

Angular

Reading your question, it seems like you're working with Angular therefore you can use the built-in class directive to toggle the class in the template itself.

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

Result:

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>

Upvotes: 10

V_for_Vj
V_for_Vj

Reputation: 894

I got the answer i used :

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

used the expand variable to toggle

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

Upvotes: 1

Related Questions