-webkit-line-clamp：2 在离子 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

 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

Answer 2

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 3

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

Answer 4

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