text-overflow: ellipsis 不能用 css 变量动态切换，因其只接受字面量 ellipsis 或 clip，不支持 var()；而 --width 和 --line-clamp 等尺寸/数量型变量可安全用于 width、-webkit-line-clamp 等属性。
纯 CSS 变量无法直接驱动 text-overflow、white-space 或 overflow 的行为逻辑，所以它不能“实现”文本溢出处理，只能辅助控制部分可变参数。
为什么 text-overflow: ellipsis 不能用 CSS 变量动态切换
CSS 变量（--my-ellipsis）可以存储字符串，但 text-overflow 属性**不接受变量作为值**——它只认字面量 ellipsis 或 clip。即使你写成 text-overflow: var(--my-ellipsis);，浏览器也会忽略该声明（devtools 中显示为 invalid），因为规范明确禁止变量用于此属性。
常见错误现象：text-overflow: var(--dotdotdot) 看似写了，但检查 computed styles 会发现它根本没生效，文本照常溢出或换行。
原因很简单：浏览器在解析 text-overflow 时要求值必须是确定的、可静态验证的关键字，而变量引入了运行时不确定性，底层渲染引擎不支持回溯求值。
--width 和 --line-clamp 是真正能用的变量
这两类变量属于“尺寸/数量型”，可被 width、max-width、-webkit-line-clamp 安全消费，且有实际工程价值：
-
width: var(--truncate-width, 200px)—— 让不同卡片复用同一 class，通过局部style="--truncate-width: 150px"调整宽度 -
-webkit-line-clamp: var(--lines, 2)—— 配合@supports做渐进增强，比如style="--lines: 3"控制摘要显示行数 - 注意：
-webkit-line-clamp接收数字，但变量值必须是无单位整数（如3），不能带px或引号；否则解析失败
flex / grid 场景下变量 + min-width: 0 的联动容易被忽略
当容器在 flex 或 grid 中使用 text-overflow: ellipsis 时，仅靠变量设宽度还不够。若父容器未显式约束子项伸缩行为，子项可能无视 width 或 max-width 撑开自身——此时省略号必然失效。
必须配合：
-
min-width: 0（对 flex item）或min-inline-size: 0（更现代写法） - 确保父容器有明确
width或inline-size，否则变量传进去也无基准可依 - 变量若来自 :root，需确认作用域是否被 shadow DOM 或 scoped style 隔离
真正灵活的地方不在“能不能加省略号”，而在于用变量把 200px、3、1.5em 这些硬编码抽出来——让 UI 系统能按上下文动态调节截断尺度，而不是靠 JS 拼字符串或重复写多套 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
