如何在悬停缩放的容器中正确实现文本溢出截断（ellipsis）

本文详解为何绝对定位文本在 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）可能回退到

或视口，从而破坏 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 中使用：

  单行超长文本

• 多行省略（推荐用于描述类长文本）：

  [line-clamp] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 控制显示行数 */
    /* 注意：line-clamp 需要配合 overflow: hidden（已继承） */
  }

  HTML 中使用：

  多行超长文本...

⚠️ 重要注意事项：

• text-overflow: ellipsis 仅对单行 + white-space: nowrap + overflow: hidden 有效；多行必须用 -webkit-line-clamp（现代浏览器兼容性良好，caniuse.com 显示支持率 >98%）。
• 移除 .thumbnail 上无效的 top: -50px; left: -35px;，它们会偏移整个容器位置，与居中逻辑冲突。
• 图片圆角可统一用 .rnd { border-radius: 28px; }，无需内联样式。
• 链接语义化建议：若 仅包裹块级元素，确保 display: inline-block 或 block 以保证点击区域完整（当前 inline-block 已满足）。

最终结构简洁、语义清晰、响应可靠 —— 文本从页面加载起就严格按容器约束截断，悬停缩放不再影响布局稳定性。