-webkit-line-clamp: 2 not working in ionic 4

Question

I am using -webkit-line-clamp: 2 to limit the number of lines appearing in an ionic4 app, but it does not comes up as expected on initial load. Instead, it comes up when I edit the css using inspect in chrome. Is there any workaround to fix it? The css used is:

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;

Answer 1

I have been facing the exact same issue and also made a question regarding it here: Ionic 4: -webkit-line-clamp property not applying on inital load

After days of trying to figure out what has been causing this. I have found that in my case I have ion-slides (https://ionicframework.com/docs/api/slides) implemented in my HTML (The same HTML file where I am facing this issue) which seems to be causing for all my styles to still apply besides from -webkit-line-clamp: 2

When I remove all instances of ion-slides within that file then my -webkit-line-clamp: 2 css rule applies correctly on initial load. I'm still trying to figure out how I can have both ion-slides and -webkit-line-clamp: 2 however i'll update this answer if I end up finding a proper solution.

UPDATE

In my particular case. I have ion-slides and an *ngFor loop to create mutilple ion-slide depending on the data returned. I noticed that I would be rendering the ion-slides last as it was dependent on the data returned from a HTTP call which seemed to have an impact on the rest of the HTML elements and their styling (In this case the -webkit-line-clamp rule) when the ion-slides was fully rendered on the page.

The problem seems to be based on a timing issue and the solution for my particular case was to fetch the data first for the ion-slides content and then the rest after that. I know this may be quite a vague answer but this issue seems to be very edge case-y and I hope this helps you to resolving this issue.

UPDATE 2

It seems that when I thought I had the issue fixed, I started running into again. There is a module that exists that can provide the same functionality as the CSS rule here (https://www.npmjs.com/package/ngx-ellipsis) however I noticed when loading many elements, it can have a slight performance impact. If you don't want to face this performance impact. You can limit the width and height of the element to limit the amount of characters shown

Answer 2

Remember to check for white-space, especially if you are inside <ion-label>:

p {
    width: 300px !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important
    white-space: normal;
}