text-overflow: ellipsis仅对单行块级元素生效，需同时满足white-space: nowrap、overflow: hidden及明确width/max-width；hover显示全文可用原生title属性，多行省略则依赖-webkit-line-clamp或JS方案。
单行文字溢出显示省略号（...），hover 时浮层/tooltip 显示全文，不是靠 JS 模拟 tooltip，而是用原生 CSS + 少量 HTML 即可稳定实现——关键在 title 属性配合 text-overflow: ellipsis 的组合，且必须满足容器约束条件。
为什么 text-overflow: ellipsis 不生效？
它只对**单行块级元素**起作用，且依赖三个前提同时成立：
-
white-space: nowrap（强制不换行） -
overflow: hidden（隐藏溢出内容） -
width或max-width有明确值（不能是auto或未设宽）
常见错误：给 <div> 设了 <code>ellipsis 却忘了设 width，或套在 <span></span> 这类 inline 元素上没转成 inline-block 或 block。
如何让 hover 时显示完整文字？
最轻量、无障碍友好、无需 JS 的方案就是直接用 title 属性：
立即学习“前端免费学习笔记（深入）”；
<p class="ellipsis" title="这是一段超长的文字，超出容器宽度就会被截断并显示省略号">这是一段超长的文字，超出容器宽度就会被截断并显示省略号</p>
CSS 只需：
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}浏览器原生 title 提示会在 hover 时自动出现，支持屏幕阅读器，且不干扰布局。注意：title 值必须和文本内容一致，否则语义断裂；若内容含 HTML 实体或特殊字符，需确保编码一致（如 在 title 中也要写成空格）。
多行文字怎么省略 + hover 显示全文？
text-overflow: ellipsis 原生不支持多行。可行路径只有两条：
- 用
-webkit-line-clamp（仅 WebKit/Blink 内核，Chrome/Safari/Edge 支持，Firefox 不支持）+display: -webkit-box，再配title—— 简单但兼容性有限 - 放弃纯 CSS，用 JS 监听
mouseenter动态生成 tooltip 元素，或切换aria-label+role="tooltip"—— 更可控，但需处理焦点、关闭时机、位置计算
若选第一种，CSS 示例：
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
/* 仍需 title 配合 hover 提示 */
}注意：-webkit-line-clamp 是实验性属性，未来可能变动；且当容器高度受字体大小影响时，line-clamp 行数可能不准。
真正容易被忽略的是：当文本含换行符（\n）或富文本（<br>）时，title 无法渲染换行，会变成一整行乱码。此时必须预处理——JS 替换 \n 为空格，或改用 aria-label + 自定义 tooltip 组件控制内容格式。
