[Help] How to achieve text truncation on multiple lines using -webkit-line-clamp.

[juanchigallego]

Hi! I was wondering if there's a way to achieve truncation of multiple lines of text.
Using regular css, one would apply the following classes and trim a paragraph on any number of lines:

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

However, using vanilla-extract, the -webkit-box-orient property is flagged as deprecated, even though it's necessary to be able to use the -webkit-line-clamp property.

I'm not sure if this should be reported as an issue or if there's another way to achieve this that I'm unaware of.

Thanks to anyone that can help!

[aspirisen]

Hi, the fact that some property is marked as deprecated doesn't affect runtime, you can use it as is.
About vendor prefixes, there is another name notation, so instead of -webkit-line-clamp2 you should use WebkitLineClamp: 2,.
More info in the docs https://vanilla-extract.style/documentation/styling/#vendor-prefixes

[juanchigallego]

Thank you very much for answering. Will be sure to try this!