background

In SCSS file, set multiple lines to omit (as below), the code does not take effect

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;Copy the code

The phenomenon of

  • Code not in effect:



  • View style,-webkit-box-orient after compiler disappears

why

-webkit-box-orient: vertical;

The solution

Scheme 1: There is no special requirement for SCSS files. You can replace them with. Less files

Solution 2: Autoprefixer (recommended)

// Single attribute text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */Copy the code





The reason:

Autoprefixer will remove old and outdated code for you. Autoprefixer will also add new prefixes for you

Second scheme optimization: configuration in webpack postcss autoprefixer:www.webpackjs.com/loaders/pos…




Reference:

Github.com/postcss/aut…

PostCSS indicates north

Webpack4 is compatible with PostCSS-Loader and autoprefixer