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

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:

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

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