text-overflow: ellipsis生效需同时满足三个条件：overflow为hidden/scroll/auto、white-space为nowrap、容器有确定块级宽度；缺一不可。
text-overflow: ellipsis 不是“开关”，而是“结果”——它只在满足三个硬性条件时才出现，缺一不可。直接加这个声明却没效果，大概率是漏了其中某个前提。
text-overflow: ellipsis 为什么完全不生效
浏览器根本不会画省略号，不是渲染慢或兼容性问题，而是 text-overflow 的触发机制被卡住了：
-
overflow必须是hidden、scroll或auto（不能是visible） -
white-space必须是nowrap（单行场景下，normal、pre-wrap都不行） - 容器必须有**确定的块级宽度约束**：比如
width、max-width，或父级用了table-layout: fixed；width: auto或未设宽的inline元素会直接撑开
常见错误写法：div { overflow: hidden; text-overflow: ellipsis; } —— 没加 white-space: nowrap，也没设宽，浏览器压根不认为存在“单行溢出”，属性被静默忽略。
多行省略必须用 -webkit-line-clamp 吗
目前最轻量、可控性最高的方案确实是 display: -webkit-box + -webkit-line-clamp，但它不是“必须”，而是“权衡之后的实用选择”：
-
-webkit-line-clamp: 3表示最多显示 3 行，超出部分裁剪并加省略号 - 必须配合
display: -webkit-box和-webkit-box-orient: vertical，否则无效 - Firefox 直到 v125 才实验性支持（需手动开启
layout.css.line-clamp.enabled），生产环境不能依赖 - 若内容含
vertical-align，避免行高错乱导致截断位置偏移
替代方案如伪元素渐变遮罩（::after + linear-gradient）能绕过兼容性问题，但无法真正“截断文本”，只是视觉遮盖，全文仍可复制、可聚焦，语义和可访问性弱。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
表格单元格（）里省略号总失效表格单元格默认是 display: table-cell，它会优先适应内容宽度，导致 overflow: hidden 失效。必须加两道保险：
- 给
加 table-layout: fixed，让列宽由 / 的 width 或 max-width 决定
- 给
加 white-space: nowrap + overflow: hidden + text-overflow: ellipsis + max-width: 150px（推荐用 max-width，比 width 更适应响应式）
漏掉 table-layout: fixed 是表格中省略号最常见的失效原因——哪怕其他条件全对，列宽仍会被内容撑开，overflow 形同虚设。
hover 显示全文要不要 JS
单行场景下，完全不需要 JS：title 属性 + 正确的 text-overflow 组合就是最轻量、无障碍友好的方案：
完整文本
- CSS 中确保
white-space: nowrap、overflow: hidden、text-overflow: ellipsis、max-width 四者齐全
-
title 值必须和文本内容严格一致（含空格、编码），否则语义断裂
多行场景下，title 仍可用，但体验差（长文本 hover 提示框不换行、易消失）；JS 动态 tooltip 虽灵活，但得处理焦点管理、关闭时机、滚动跟随等细节——别低估这些边界情况的复杂度。
表格单元格默认是 display: table-cell，它会优先适应内容宽度，导致 overflow: hidden 失效。必须加两道保险：
- 给
加
table-layout: fixed，让列宽由/ 的 width或max-width决定- 给
加 white-space: nowrap+overflow: hidden+text-overflow: ellipsis+max-width: 150px（推荐用max-width，比width更适应响应式）漏掉
table-layout: fixed是表格中省略号最常见的失效原因——哪怕其他条件全对，列宽仍会被内容撑开，overflow形同虚设。hover 显示全文要不要 JS
单行场景下，完全不需要 JS：
title属性 + 正确的text-overflow组合就是最轻量、无障碍友好的方案：完整文本
- CSS 中确保
white-space: nowrap、overflow: hidden、text-overflow: ellipsis、max-width四者齐全 -
title值必须和文本内容严格一致（含空格、编码），否则语义断裂
多行场景下，
title仍可用，但体验差（长文本 hover 提示框不换行、易消失）；JS 动态 tooltip 虽灵活，但得处理焦点管理、关闭时机、滚动跟随等细节——别低估这些边界情况的复杂度。 - 给
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
