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

JavaScript function encapsulates random color verification code (complete code)

An n-digit verification code consisting of number...

Analysis of the principle of Mybatis mapper dynamic proxy

Preface Before we start explaining the principle ...

MySQL 5.7.21 installation and configuration tutorial under Window10

This article records the installation and configu...

Detailed explanation of docker's high availability configuration

Docker Compose Docker Compose divides the managed...

js to make a simple calculator

This article shares the specific code of making a...

Form submission refresh page does not jump source code design

1. Design source code Copy code The code is as fol...

5 Simple XHTML Web Forms for Web Design

Simple XHTML web form in web design 5. Technique ...

Detailed tutorial on installing mysql 8.0.20 on CentOS7.8

1. Install MySQL software Download and install My...

How to solve the problem that the project in eclipse cannot be added to tomcat

1. Right-click the project and select properties ...

HTML Grammar Encyclopedia_HTML Language Grammar Encyclopedia (Must Read)

Volume Label, Property Name, Description 002 <...

vue.js downloads pictures according to picture url

Recently, when I was working on a front-end vue.j...

Example analysis of the impact of MySQL index on sorting

This article uses examples to illustrate the impa...

Display mode of elements in CSS

In CSS, element tags are divided into two categor...