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

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.

<<:  Markup validation for doctype

>>:  Solution to MySQL replication failure caused by disk fullness

Recommend

Detailed explanation of using scp command to copy files remotely in Linux

Preface scp is the abbreviation of secure copy. s...

Detailed explanation of how to easily switch CSS themes

I recently added a very simple color scheme (them...

VMWare Linux MySQL 5.7.13 installation and configuration tutorial

This article shares with you the tutorial of inst...

SQL implements LeetCode (180. Continuous numbers)

[LeetCode] 180. Consecutive Numbers Write a SQL q...

A universal nginx interface to implement reverse proxy configuration

1. What is a proxy server? Proxy server, when the...

Vue template compilation details

Table of contents 1. parse 1.1 Rules for intercep...

Two types of tab applications in web design

Nowadays, tabs are widely used in web design, but...

Nginx reverse proxy springboot jar package process analysis

The common way to deploy a springboot project to ...

ElementUI implements sample code for drop-down options and multiple-select boxes

Table of contents Drop-down multiple-select box U...

How to mount a disk in Linux

When using a virtual machine, you may find that t...