Css-webkit-box-original: detailed explanation of the problem of loss of vertical property after compilation

Time:2020-1-21

I. causes

It is required to display two lines of text, and the redundant text is replaced by three points. Therefore, these non-standard attributes are used


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

Later, it was found that the code was well written. When it came to the page, there was no response, just like it was not written. F12 looked at it and found that it was – WebKit Box Original: vertical; this attribute was lost, which led to ineffectiveness. In styles, it would be good to add this attribute, so it was concluded that the compilation process led to the loss of this attribute.

2、 Solutions

A feasible solution is found on the Internet. Turn off the autoprefixer. There is a way to write:


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

In this way, it does solve the problem of compilation loss, but it will report warning during compilation, and finally find the best solution on GitHub, as follows


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

The problem is solved perfectly, and warning will not be reported.

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.

Recommended Today

Vs code usage

Common shortcut keys: Shift + Alt + F on Windows format code Shift + option + F on MAC format code Shift + Alt + a block comment Common plug-ins: [plug in installation method] Markdown Preview Enhanced Preview markdown in real time, which is necessary for users Path Intellisense Automatically prompt file path, support various […]