使用 CSS 实现多行省略

Dec 17, 2020CSS点击

通过对CSS样式的设置，我们可以实现文本的多行省略效果

单行省略

要实现单行省略，可以把样式设置为：

.text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行省略

对于多行省略可以使用 -webkit-line-clamp - CSS（层叠样式表） | MDN

进行如下设置：

.ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

但我在 React 项目里写 scss 文件的时候，发现这么写并没起作用

直接把样式复制到 chrome dev tool 里却可以起作用

观察后发现，项目最终的样式里少了一行 -webkit-box-orient: vertical;

SCSS 中不起作用

查了一下，在 css - webkit box orient styling disappears from styling - Stack Overflow 中得到解决方法

在 scss 中需要添加注释 /* autoprefixer: off */

在这部分代码里不让 autoprefixer 生效

.ellipsis {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    /* autoprefixer: off */
}

可以写成mixin，实现复用：

@mixin clamp_lines($lines) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
  /* autoprefixer: off */
}

原文作者: dgb8901,yinxing
原文链接: https://www.itwork.club/2020/12/17/lines-clamp/
版权声明: 转载请注明出处

体验小程序「简易记账」

关注公众号「特想学英语」

使用 CSS 实现多行省略

使用 CSS 实现多行省略

单行省略

多行省略

SCSS 中不起作用

为您推荐