Autoprefixer might be the reason -webkit-line-clamp is not working in CSS

Adding Ellipses When Text Spans Multiple Lines

I've been working on a CSS implementation to add an ellipsis when text becomes long across multiple lines. However, the CSS didn't take effect and it didn't work properly, so I'm sharing it here.

In a system using Vue/Nuxt, there was a request to truncate long text over multiple lines and add an ellipsis. Looking it up on the web, I found that it seemed like it could be done easily using something called "line-clamp."

Specifying the Number of Lines to Show an Ellipsis with -webkit-line-clamp

I tried to specify the truncation using -webkit-line-clamp to truncate at 2 lines.

   display: -webkit-box;
   -webkit-line-clamp: 2; // Specify the number of lines to show the ellipsis
   -webkit-box-orient: vertical;
   overflow: hidden;

However, for some reason, the ellipsis doesn't appear and it doesn't work. It's frustrating.

After investigating why the CSS wasn't working and why it failed to function, here is what I found:

The Cause is PostCSS's Autoprefixer

PostCSS's Autoprefixer was causing the issue.
https://github.com/postcss/autoprefixer/issues/776

There is a bug where -webkit-box-orient is deleted

Apparently, in certain versions of PostCSS's Autoprefixer, there is a bug that automatically deletes -webkit-box-orient.

Solution

To fix this, do the following:

   /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;

I hope this helps someone.