In sass file
h3 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 24px;
max-height: 24px;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
After running gulp task, getting in css as
.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;
}
The style -webkit-box-orient: vertical;
is missing in css file.
My gulp task for sass compilation is
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' }));
});
Add this line of code and it will work fine:
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With