CSS -webkit-box-orient: vertical property lost after compilation

1. Cause

The requirement is to display two lines, and the extra text is replaced by three dots, so these less standardized attributes are used.

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

Later I found that the code was written well, but it didn't respond when it was on the page, as if I hadn't written it at all. I checked it with F12 and found that the -webkit-box-orient: vertical; attribute was missing, causing it to fail to take effect. I just added this attribute in Styles, so I concluded that the compilation process caused this attribute to be lost.

2. Solution

I found a feasible solution on the Internet. To turn off autoprefixer, there is a way to write it:

/*!autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

This does solve the problem of missing compilation, but a warning will be reported during the compilation process. Finally, the best solution was found on GitHub, as follows

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

The problem is solved perfectly and no warning is reported.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.