Is this more than a packing puzzle?

Getting fresh water in the middle of hypersaline lake in the Bronze Age

How long do Apple retain notifications to be pushed to iOS devices until they expire?

Possible isometry groups of open manifolds

How to draw a gif with expanding circles that reveal lines connecting a non-centered point to the expanding circle using Tikz

Align by center of symbol

Is a public company able to check out who owns its shares in very detailed format?

Is killing off one of my queer characters homophobic?

How can I legally visit the United States Minor Outlying Islands in the Pacific?

Redox reactions redefined

How would someone destroy a black hole that’s at the centre of a planet?

Asking for higher salary after I increased my initial figure

Commutator subgroup of Heisenberg group.

Why do candidates not quit if they no longer have a realistic chance to win in the 2020 US presidents election

Why do legislative committees exist?

What are some symbols representing peasants/oppressed persons fighting back?

3D-Plot with an inequality condition for parameter values

Why do they not say "The Baby"

Can someone explain this logical statement?

Does entangle require vegetation?

Why does the Earth have a z-component at the start of the J2000 epoch?

Why is dry soil hydrophobic? Bad gardener paradox

Confused about 誘われて (Sasowarete)

Nested-Loop-Join: How many comparisons and how many pages-accesses?

ellipsis (three dots) expand and collapse the text

Angular 2 Read More DirectiveHow do you keep parents of floated elements from collapsing?Vertically align text next to an image?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?HTML text-overflow ellipsis detectionHow do I vertically center text with CSS?Fluid width with text-overflow ellipsistext-overflow: ellipsis cuts the double dots on German Ö Ä Ütext-overflow: ellipsis property of CSS not working properlyText overflow ellipsis and expand does not work

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

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=" highlighter : reviewName"></div>

html css angular

share|improve this question

edited Mar 26 at 6:42

V_for_Vj

asked Mar 26 at 6:34

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  You will have to create a custom read more probably. See if this helps you stackoverflow.com/a/39859181/4990572
  
  – Nandita Sharma
  Mar 26 at 6:40
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  please show us your html
  
  – לבני מלכה
  Mar 26 at 6:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can u explain in more extended fashion
  
  – V_for_Vj
  Mar 26 at 6:41
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  <div class="overflow" innerHTML=" highlighter : reviewName"></div>
  
  – V_for_Vj
  Mar 26 at 6:41
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  <div [class.overflow]="isExpand" innerHTML=" highlighter : reviewName" (click)="isExpandToggle()"></div>
  
  – V_for_Vj
  Mar 26 at 6:58
  

  
  
  
  

add a comment | 

1

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=" highlighter : reviewName"></div>

html css angular

share|improve this question

edited Mar 26 at 6:42

V_for_Vj

asked Mar 26 at 6:34

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  You will have to create a custom read more probably. See if this helps you stackoverflow.com/a/39859181/4990572
  
  – Nandita Sharma
  Mar 26 at 6:40
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  please show us your html
  
  – לבני מלכה
  Mar 26 at 6:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can u explain in more extended fashion
  
  – V_for_Vj
  Mar 26 at 6:41
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  <div class="overflow" innerHTML=" highlighter : reviewName"></div>
  
  – V_for_Vj
  Mar 26 at 6:41
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  <div [class.overflow]="isExpand" innerHTML=" highlighter : reviewName" (click)="isExpandToggle()"></div>
  
  – V_for_Vj
  Mar 26 at 6:58
  

  
  
  
  

add a comment | 

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=" highlighter : reviewName"></div>

html css angular

share|improve this question

edited Mar 26 at 6:42

V_for_Vj

asked Mar 26 at 6:34

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges

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

 <div class="overflow" innerHTML=" highlighter : reviewName"></div>

html css angular

html css angular

share|improve this question

edited Mar 26 at 6:42

V_for_Vj

asked Mar 26 at 6:34

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges

share|improve this question

edited Mar 26 at 6:42

V_for_Vj

asked Mar 26 at 6:34

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges

asked Mar 26 at 6:34

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges

asked Mar 26 at 6:34

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges

2 Answers
2

active

oldest

votes

1

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>

share|improve this answer

edited Mar 27 at 2:49

answered Mar 26 at 11:34

BurhanBurhan

24822 silver badges1111 bronze badges

add a comment | 

1

I got the answer i used :

<div [class.overflow]="isExpand" innerHTML=" post.review_Text " (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;

share|improve this answer

answered Mar 26 at 7:06

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55351096%2fellipsis-three-dots-expand-and-collapse-the-text%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

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>

share|improve this answer

edited Mar 27 at 2:49

answered Mar 26 at 11:34

BurhanBurhan

24822 silver badges1111 bronze badges

add a comment | 

1

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>

share|improve this answer

edited Mar 27 at 2:49

answered Mar 26 at 11:34

BurhanBurhan

24822 silver badges1111 bronze badges

add a comment | 

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>

share|improve this answer

edited Mar 27 at 2:49

answered Mar 26 at 11:34

BurhanBurhan

24822 silver badges1111 bronze badges

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

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

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

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

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

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

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>

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>

share|improve this answer

edited Mar 27 at 2:49

answered Mar 26 at 11:34

BurhanBurhan

24822 silver badges1111 bronze badges

answered Mar 26 at 11:34

BurhanBurhan

24822 silver badges1111 bronze badges

answered Mar 26 at 11:34

BurhanBurhan

24822 silver badges1111 bronze badges

1

I got the answer i used :

<div [class.overflow]="isExpand" innerHTML=" post.review_Text " (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;

share|improve this answer

answered Mar 26 at 7:06

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges

add a comment | 

1

I got the answer i used :

<div [class.overflow]="isExpand" innerHTML=" post.review_Text " (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;

share|improve this answer

answered Mar 26 at 7:06

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges

add a comment | 

I got the answer i used :

<div [class.overflow]="isExpand" innerHTML=" post.review_Text " (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;

share|improve this answer

answered Mar 26 at 7:06

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges

<div [class.overflow]="isExpand" innerHTML=" post.review_Text " (click)="isExpandToggle()"></div>

isExpand:boolean=true;

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

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

share|improve this answer

answered Mar 26 at 7:06

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges

answered Mar 26 at 7:06

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges

answered Mar 26 at 7:06

V_for_VjV_for_Vj

3611 silver badge1717 bronze badges