How to show ellipsis for a content - html

Question

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

Answer 1

Here's an example of a div with content that acts as you wish, you can apply the CSS rules on your ion-col.
HTML
<div class="card">
<div class="item">
short text
</div>
<div class="item">
long text wrgj rgoiherg eroighe goeirhg rgirg rgihreg
</div>
</div>
CSS
.card{
width: 200px;
}
.item{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Answer 2

Check ellipsis-angular npm package.
Using it you may add ellipsis automatically if HTML content overflows container.
Installation: npm i ellipsis-angular
Usage example:
<div ellipsis-angular>
<!-- Static HTML content goes here --->
</div>
or
<div ellipsis-angular [innerHTML]="someHTMLStringVariable"></div>
for dynamic html.