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），生产环境不能依赖 - 若内容含
<img alt="HTML怎么设置文字溢出省略_html text-overflow文字截断方法【从零开始】" >等内联元素，要检查vertical-align，避免行高错乱导致截断位置偏移
替代方案如伪元素渐变遮罩（::after + linear-gradient）能绕过兼容性问题，但无法真正“截断文本”，只是视觉遮盖，全文仍可复制、可聚焦，语义和可访问性弱。
表格单元格（<td>）里省略号总失效
<p>表格单元格默认是 <code>display: table-cell，它会优先适应内容宽度，导致 overflow: hidden 失效。必须加两道保险：
- 给
<table> 加 <code>table-layout: fixed，让列宽由 <th>/<code><td> 的 <code>width 或 max-width 决定
- 给
<td> 加 <code>white-space: nowrap + overflow: hidden + text-overflow: ellipsis + max-width: 150px（推荐用 max-width，比 width 更适应响应式）
漏掉 table-layout: fixed 是表格中省略号最常见的失效原因——哪怕其他条件全对，列宽仍会被内容撑开，overflow 形同虚设。
hover 显示全文要不要 JS
单行场景下，完全不需要 JS：title 属性 + 正确的 text-overflow 组合就是最轻量、无障碍友好的方案：
<p class="ellipsis" title="完整文本">完整文本</p>- CSS 中确保
white-space: nowrap、overflow: hidden、text-overflow: ellipsis、max-width 四者齐全
-
title 值必须和文本内容严格一致（含空格、编码），否则语义断裂
多行场景下，title 仍可用，但体验差（长文本 hover 提示框不换行、易消失）；JS 动态 tooltip 虽灵活，但得处理焦点管理、关闭时机、滚动跟随等细节——别低估这些边界情况的复杂度。
<table> 加 <code>table-layout: fixed，让列宽由 <th>/<code><td> 的 <code>width 或 max-width 决定
<td> 加 <code>white-space: nowrap + overflow: hidden + text-overflow: ellipsis + max-width: 150px（推荐用 max-width，比 width 更适应响应式）
漏掉 table-layout: fixed 是表格中省略号最常见的失效原因——哪怕其他条件全对，列宽仍会被内容撑开，overflow 形同虚设。
hover 显示全文要不要 JS
单行场景下，完全不需要 JS：title 属性 + 正确的 text-overflow 组合就是最轻量、无障碍友好的方案：
<p class="ellipsis" title="完整文本">完整文本</p>- CSS 中确保
white-space: nowrap、overflow: hidden、text-overflow: ellipsis、max-width四者齐全 -
title值必须和文本内容严格一致（含空格、编码），否则语义断裂
多行场景下，title 仍可用，但体验差（长文本 hover 提示框不换行、易消失）；JS 动态 tooltip 虽灵活，但得处理焦点管理、关闭时机、滚动跟随等细节——别低估这些边界情况的复杂度。
