7

使用 CSS 实现多行省略

 3 years ago
source link: https://www.itwork.club/2020/12/17/lines-clamp/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

使用 CSS 实现多行省略

漂洋过海来看你

IT俱乐部-码出人生

使用 CSS 实现多行省略

Dec 17, 2020CSS6点击

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

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

1
2
3
4
5
.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，实现复用：

1
2
3
4
5
6
7
@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/

版权声明: 转载请注明出处

qrcode.jpg

体验小程序「简易记账」

qrcode_mp.jpg

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK