本文详解为何绝对定位文本在 hover 缩放时才触发 `text-overflow: ellipsis`，核心在于缺失 `position: relative` 创建堆叠上下文，并提供单行/多行截断的健壮解决方案。
在 CSS 布局中，position: absolute 元素的定位基准是其最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的父级）。你当前的 .textinimage 使用了 position: absolute 并依赖 transform: translate(-50%, -50%) 居中，但其父容器 .thumbnail 未声明 position，因此浏览器默认将其视为 static —— 这导致绝对定位元素脱离正常文档流后，其包含块（containing block）可能回退到 <body> 或视口，从而破坏 width: 90% 和 overflow: hidden 的作用范围。结果就是：text-overflow: ellipsis 在初始状态失效，仅在 :hover 触发 transform: scale() 重绘时“偶然”生效（因缩放可能触发布局重计算，掩盖了根本问题）。
✅ 正确解法：为 .thumbnail 显式添加 position: relative，使其成为 .textinimage 的定位上下文和溢出裁剪容器：
.thumbnail {
position: relative; /* ✅ 关键修复：创建新的包含块 */
display: inline-block;
cursor: pointer;
opacity: 0.5;
transition: all 0.4s ease-in-out; /* 推荐用标准 transition 替代 -webkit- 前缀 */
}
.textinimage {
font-size: 1.1vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%; /* 相对于 .thumbnail 宽度 */
overflow: hidden; /* ✅ 必须存在才能启用 ellipsis */
}? 同时，根据文本需求选择合适的截断方式：
-
单行省略（推荐用于标题类短文本）：
[ellipsis] { white-space: nowrap; text-overflow: ellipsis; }HTML 中使用：<div class="textinimage" ellipsis>单行超长文本</div>
-
多行省略（推荐用于描述类长文本）：
[line-clamp] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* 控制显示行数 */ /* 注意：line-clamp 需要配合 overflow: hidden（已继承） */ }HTML 中使用：<div class="textinimage" line-clamp>多行超长文本...</div>
⚠️ 重要注意事项：
- text-overflow: ellipsis 仅对单行 + white-space: nowrap + overflow: hidden 有效；多行必须用 -webkit-line-clamp（现代浏览器兼容性良好，caniuse.com 显示支持率 >98%）。
- 移除 .thumbnail 上无效的 top: -50px; left: -35px;，它们会偏移整个容器位置，与居中逻辑冲突。
- 图片圆角可统一用 .rnd { border-radius: 28px; }，无需内联样式。
- 链接语义化建议：若 <a> 仅包裹块级元素，确保 display: inline-block 或 block 以保证点击区域完整（当前 inline-block 已满足）。
最终结构简洁、语义清晰、响应可靠 —— 文本从页面加载起就严格按容器约束截断，悬停缩放不再影响布局稳定性。
