![]() If you're interested - you could take a look at my answer here: a line-clamp with fade-out fallback fiddle which adds a fade-out effect workaround (instead of ellipsis) for non-webkit browsers. Firefox runs on gecko and uses the vendor prefix: -moz. webkit-line-clamp is for browsers that use webkit. ![]() Note: CSS Overflow Module Level 3 Editor's draft includes an official property line-clamp - which will likely replace the proprietary -webkit-line-clamp property. see webplatform.newsĪlthough Firefox uses the Gecko rendering Engine which uses the -moz- vendor prefix, since version 49, Firefox decided to add support for several -webkit- prefixes and WebKit-specific interfaces } When the CSS -webkit-line-clamp property is applied to a block of text (e.g., a paragraph), the text is limited to the specified number of lines (1 or more), and an ellipsis character (…) is added to the end of the last visible line. If you don't want to face this performance impact.-webkit-line-clamp: 3 /* number of lines to show */ There is a module that exists that can provide the same functionality as the CSS rule here ( ) however I noticed when loading many elements, it can have a slight performance impact. ![]() It seems that when I thought I had the issue fixed, I started running into again. 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. 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. In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines. It only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical. 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 -webkit-line-clamp CSS property allows limiting of the contents of a block to the specified number of lines. In fact, that’s how the demo above was done. ![]() We can get some line clamping action with a -webkit- prefix (which, weirdly enough, works across all major browsers). I have ion-slides and an *ngFor loop to create mutilple ion-slide depending on the data returned. Line clamps are part of the CSS Overflow Module Level 3 which is currently in Editor’s Draft and totally unsupported at the moment. 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. 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 have found that in my case I have ion-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 ![]() 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Īfter days of trying to figure out what has been causing this. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |