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

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
}

<p>
  In this example the <code>-webkit-line-clamp</code> lorem ipsum lorem ipsum <code>3</code>, which means the text is clamped after three lines.
  An ellipsis will be shown at the point where the text is clamped.
</p>

• Make a class if u want to use it multiple times or id if you want to use it once
• Then implement that class or id in your root css files(global or variable) by using '!important'
• It will surely work for you

https://play.google.com/store/apps/details?id=com.nandi.development

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

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;
}

For ionic 4 you have to add style="-webkit-box-orient: vertical" to the html element For example:

<p style="-webkit-box-orient: vertical">
In this example the <code>-webkit-line-clamp</code> lorem ipsum lorem ipsum <code>3</code>, which means the text is clamped after three lines.
  An ellipsis will be shown at the point where the text is clamped.
</p>

p {
 width: 300px;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}