Question

在sass文件中

h3 {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                line-height: 24px; 
                max-height: 24px;
                -webkit-line-clamp: 1; 
                -webkit-box-orient: vertical;
            }

运行gulp任务后，以

进入css

 .article-list.search .article-listings__item h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 24px;
  max-height: 24px;
  -webkit-line-clamp: 1;
}

css文件中缺少样式-webkit-box-orient: vertical;。

sass编译的gulp任务是

gulp.task('styles', function() {
  return sass('src/assets/stylesheets/index.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});

Answer 1

添加这行代码，它将正常工作：

/* autoprefixer: off */

-webkit-box-orient: vertical;

/* autoprefixer: on */

Answer 2

在Github上查看此问题。

像这样配置autoprefixer。希望它可以帮到你。

autoprefixer({
  remove: false,
  browsers: ['last 2 versions']
})

Answer 3

这是对我真正有用的一个

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

Answer 4

如R V Niranjan所述，该方法非常有效。

/* autoprefixer: off */

-webkit-box-orient: vertical;

/* autoprefixer: on */

出于我的目的，我正在寻找一些有助于live-sass vscode插件的东西，因为它不包含-webkit-box-orient属性。我可以确认此方法也适用于插件。

我认为必须处理插件似乎在后台使用自动前缀的事实。

-webkit-box-orient：垂直;在sass中没有编译成gulp

4 个答案: