text-overflow: ellipsis 仅对块级元素生效，需同时满足 display为block/inline-block、white-space: nowrap、overflow: hidden 且设置宽度；hover展开完整文本只能靠title属性或JS实现。
text-overflow: ellipsis 只对块级元素生效
直接给 span 或 a 这类行内元素加 text-overflow: ellipsis 是无效的，浏览器会默默忽略。它必须配合三个前提：display 为块级（或 inline-block）、white-space: nowrap、overflow: hidden。
常见错误现象：text-overflow 不生效，文字照常换行或溢出容器。
- 把目标元素设为
display: inline-block或display: block - 强制单行：加
white-space: nowrap - 隐藏溢出：加
overflow: hidden - 别忘了设宽度（
width或max-width），否则没有“截断”边界
hover 展开完整文本需用 title 属性或伪元素模拟
CSS 本身不能“展开”被截断的文字，只能靠 title 属性触发原生提示，或用 JavaScript 动态切换样式。纯 CSS 方案里最轻量的是利用 title：
<p class="truncate" title="这是很长的一段说明文字">这是很长的一段说明文字</p>
但 title 无法控制样式、延迟、位置，且移动端不一致。如果必须 hover 显示完整内容，得用 JS 监听 mouseenter，把文本塞进 tooltip 元素 —— 纯 CSS 做不到“动态显示完整文本”。
立即学习“前端免费学习笔记（深入）”；
-
title是唯一零 JS 的 fallback，但体验粗糙 - 不要试图用
::after+content: attr(data-full)模拟，它无法响应 hover 时的尺寸变化，也不支持换行 - 若用 JS，优先监听
mouseenter而非mouseover，避免事件冒泡干扰
用特定类名精准控制截断行为
类名不是装饰，是控制作用域的关键。比如 .text-truncate 应只作用于需要单行截断的场景；多行截断要用 -webkit-line-clamp，得另起一套类（如 .text-clamp-2）。
常见错误：一个 .truncate 类到处套，结果在 flex 容器里失效，或在响应式断点中忘记重置 white-space。
- 单行截断推荐类名：
.text-ellipsis（语义清晰，避免和 JS 工具类混淆） - 多行截断必须加
display: -webkit-box和-webkit-line-clamp，且height不能设死（否则可能切掉半行字） - 在媒体查询中，建议用
max-lines（未来标准）做渐进增强，目前仍以-webkit-line-clamp为主
IE 和旧版 Safari 的兼容性坑
text-overflow: ellipsis 在 IE10+ 和现代 Chrome/Firefox 都稳定，但 IE9 及以下完全不支持；-webkit-line-clamp 则在 Safari 6.1+、Chrome 28+ 支持，Firefox 始终不支持（截至 v125）。
这意味着：依赖多行截断的 UI，在 Firefox 中会全文显示，撑开容器 —— 如果设计上不允许，就得用 JS 方案兜底（如 clamp.js 或自定义截断逻辑）。
- 检查是否真需要多行截断：很多场景其实单行 + title 就够了
- 不要在 CSS 中写
@supports (line-clamp: 2)，它永远返回 false —— 正确写法是@supports (-webkit-line-clamp: 2) - 服务端渲染时注意：JS 截断逻辑若依赖 DOM 宽度，首次渲染可能误判，建议加
font-display: swap并延迟计算
