How to show ellipsis for a content

Ionic Framework ionic-v3
1

I am building an Ionic3/Angular application and i have a list of cards of some notes like below:

enter image description here

So, you can see that my notes can be larger than the width of the card. So, it has been truncated as ellipsis using ion-item.

<ion-col col-11 class="padding-0">
     <ion-item class="padding-left-0">{{noteInfo.Notes}}</ion-item>
</ion-col>

But, the problem is that Notes are not always plain string like “This is test”. It can be a HTML element like

<span style='color:red'>This is test</span>

and the note may be larger than this simple note. As the note will be HTML element, i change my code for showing the note in the card like below:

<ion-col col-11 class="padding-0">
                    <ion-item class="padding-left-0" [innerHTML]="progressNote[0].HTMLNotes | safeHtml:'html'">
                    </ion-item>
</ion-col>

And the output is:

enter image description here

But, i have an expand button for every note and if i click on that the actual note is like below:

enter image description here

Now, you can see that setting the HTML in the innerHTML of ion-item, it does not show ellipsis if the notes is larger than the width. But, i need to show only a preview in the card and that preview needs to be colored.

So, is there any way to show the HTML element in an ion-item so that it takes as much as the width can fit in the card and then show ellipsis for rest of the content?

Thanks in advance…

2

Figure out what is responsible for truncating the text and showing an ellipsis - probably by Inspecting the HTML element and looking at the CSS - I guess this is not really happening in JS. Why is it not applied to your code when you use HTML formatting?

3

Perhaps applying a custom class for the ion-item tag on this page, as stated here or fixing it’s width and height, and hiding any overflows.
Another idea that could help is making a custom pipe to truncate the text.

Best regards.
Jose Ignacio