How to text-overflow: ellipsis inside ion-item?

[Astrid5]

Hey guys, I got an issue here. I want to hide a long string content using “…” at the end, instead of hiding it normally. Here is my code:

<ion-list class="ion-no-padding list-settings dark-background ion-margin-top">
...
...
...
      <ion-item class="ion-no-padding content-margin-horizontal dark-background">
                <ion-col>
                    <ion-label>
                        <h2 class="toggle-label">E-mail</h2>
                    </ion-label>
                </ion-col>
                <ion-col>
                    <p class="data-collaborator ellipsis">{{user?.get('username')}} </p>
                </ion-col>
            </ion-item>     

Here is how my view look like atm. I want the “…” on the end. “Ellipsis” class has “overflow: hidden; text-overflow: ellipsis;” on it, but it doesn’t work. Any one?

[rapropos]

If you don’t get any better answers, you could do the truncation manually as a property of the object. Incidentally, never call functions from inside {{}} interpolated expressions (or anything else that gets displayed in a template). Just reference properties. This is because Angular’s change detection can know when a property changes, but it can’t know when a function will return something different, so it must call it needlessly zillions of times.