前端 封装 SCSS 多行省略

@mixin multiEllipsis 讲解

这个 SCSS mixin 用于实现多行文本溢出时的省略号效果。以下是对每一部分的详细解释：

1. 参数定义

scss

代码解读

复制代码

@mixin multiEllipsis($line: 2) {

• @mixin：定义一个 mixin，允许在多个地方重用样式。
• $line: 2：接受一个参数 $line，默认值为 2，表示要显示的行数。

2. 样式属性

scss

代码解读

复制代码

overflow: hidden;

• overflow: hidden;：隐藏超出容器的内容。

scss

代码解读

复制代码

text-overflow: ellipsis;

• text-overflow: ellipsis;：当文本溢出时，显示省略号（...）。

scss

代码解读

复制代码

display: -webkit-box;

• display: -webkit-box;：使用 WebKit 的 flexbox 盒子模型，以便支持多行文本截断。

scss

代码解读

复制代码

-webkit-line-clamp: $line;

• -webkit-line-clamp: $line;：指定要显示的行数。结合 -webkit-box 使用时，会限制文本的行数，并在超出行数时显示省略号。

scss

代码解读

复制代码

-webkit-box-orient: vertical;

• -webkit-box-orient: vertical;：设置盒子模型的方向为垂直，使得文本可以在垂直方向上进行排列。

整体效果

这个 mixin 的整体效果是，当文本的行数超过指定的 $line 时，超出的部分会被隐藏，并且最后一行会用省略号表示。

使用示例

你可以在样式中调用这个 mixin，如下所示：

scss

代码解读

复制代码

.my-text { @include multiEllipsis(3); // 显示最多 3 行文本 }

完整代码

scss

代码解读

复制代码

@mixin multiEllipsis($line: 2) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: $line; -webkit-box-orient: vertical; }

总结

这个 mixin 是一个强大的工具，用于处理多行文本溢出时的显示效果，特别适用于需要在有限空间内展示文本的场景。通过使用这个 mixin，你可以保持代码的简洁性和可读性，同时实现复杂的文本处理效果。

原文链接：https://juejin.cn/post/7405490566337658932

更多详解点此