How to show ellipsis for a content

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>

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'">

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…

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?

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