前端封装 SCSS 多行省略@mixin multiEllipsis 讲解这个 SCSS mixin 用于实现多行文

`@mixin multiEllipsis` 讲解

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

1. 参数定义

@mixin multiEllipsis($line: 2) {

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

2. 样式属性

overflow: hidden;

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

text-overflow: ellipsis;

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

display: -webkit-box;

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

-webkit-line-clamp: $line;

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

-webkit-box-orient: vertical;

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

整体效果

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

使用示例

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

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

完整代码

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

总结

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

前端 封装 SCSS 多行省略

@mixin multiEllipsis 讲解