scss @mixin 实现文本隐藏仅分单行省略和多行省略两类；单行需 white-space: nowrap + overflow: hidden + text-overflow: ellipsis + 明确宽度；多行依赖 -webkit-line-clamp，仅 webkit 内核支持，firefox 不兼容，且需 display: -webkit-box 和 -webkit-box-orient: vertical。
直接说结论：SCSS @mixin 实现文本隐藏，核心就两类——单行省略和多行省略；其他所谓“隐藏”（比如 display: none、text-indent: -9999px）本质是 DOM 层级或布局层面的隐藏，不属于“文本溢出隐藏”范畴，混用容易误伤可访问性或 SEO。
单行文本溢出隐藏必须用 white-space: nowrap
这是最稳定、兼容性最好的方案，所有现代浏览器都支持，不需要 WebKit 前缀。常见错误是只写 text-overflow: ellipsis 却漏掉 white-space: nowrap 和 overflow: hidden，结果根本不出省略号。
-
white-space: nowrap阻止换行，强制一行显示 -
overflow: hidden截断超出部分（没它，文字会溢出容器） -
text-overflow: ellipsis仅在块级元素 + 溢出时生效，不能单独存在 - 必须有明确宽度（
width或max-width），否则不触发溢出
SCSS 封装示例：
@mixin uniline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行文本溢出隐藏依赖 -webkit-line-clamp，且仅限 WebKit 内核
这个方案在 Chrome、Safari、Edge（Chromium 版）可用，Firefox 完全不支持，line-clamp 标准至今未落地。所以别指望纯 CSS 多行省略能跨浏览器一致工作。
-
display: -webkit-box是前提，不是可选——没有它，-webkit-line-clamp不生效 -
-webkit-box-orient: vertical必须显式声明，否则默认是 horizontal -
-webkit-line-clamp的值必须是整数，不能是变量计算表达式（如$lines + 1） - 如果父容器已有
display: flex或display: grid，再套-webkit-box会冲突，布局可能崩
推荐 mixin 写法（带条件判断）：
@mixin ellipsis($lines: 2) {
overflow: hidden;
text-overflow: ellipsis;
@if $lines == 1 {
white-space: nowrap;
} @else {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
}
}
别把 display: none 或 visibility: hidden 当作“文本隐藏 mixin”
这类写法跟“溢出隐藏”完全不是一回事，它们干的是 DOM 渲染控制，不是文本截断。硬塞进 ellipsis mixin 里，只会让调用者困惑，还可能破坏语义结构。
-
display: none：元素彻底从渲染树移除，屏幕阅读器也读不到，不适合标题、摘要等需保留语义的内容 -
visibility: hidden：占位但不可见，常用于过渡动画，跟省略号无关 -
text-indent: -9999px：老式 SEO 黑帽手法，现代搜索引擎已识别并可能惩罚，且对高 DPI 屏幕不友好
真要封装“隐藏”，应单独命名，比如 @mixin visually-hidden，并搭配 clip-path 或 clip（已废弃）+ position: absolute 等可访问性友好的方式，而不是混进文本截断逻辑里。
传参默认值和调用场景必须匹配实际需求
很多项目一上来就设 $lines: 2，但实际业务中，卡片标题常需 1 行，详情描述才用 2–3 行。硬编码默认值会导致大量覆盖调用，反而增加冗余。
- 标题类文本建议默认
$lines: 1，更符合多数 UI 设计规范 - 描述类文本可设
$lines: 2或$lines: 3，但应在文档里注明适用场景 - 避免在同一个容器上叠加多个 mixin（比如先
@include uniline又@include ellipsis(2)），CSS 会以最后声明为准，但可维护性极差 - Vue / React 组件 scoped style 中使用时，注意
scoped会加属性选择器，可能影响::after等伪元素行为（虽然 ellipsis 不依赖伪元素）
真正容易被忽略的点是：多行省略对行高敏感。line-height 和 font-size 不匹配时，最后一行可能被截掉半截字，或者留白过大。这不是 mixin 能解决的，得靠设计稿约定和 QA 人工校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
