容器内文本溢出截断异常：仅Hover时生效的问题修复求助

核心问题修复：文本截断仅hover生效 #

问题根源是**.thumbnail未设置position: relative**——你的.textinimage使用了position: absolute，但缺少相对定位的父容器时，它的宽度参考对象是上层无定位元素（比如<a>或body），而非.thumbnail本身。hover时.thumbnail的缩放触发了浏览器重绘，才临时让截断逻辑生效。

给.thumbnail添加position: relative即可解决：

.thumbnail { 
    position: relative; /* 新增，约束绝对定位子元素的范围 */
    display:inline-block; 
    z-index:999; 
    cursor: pointer; 
    opacity: 0.5;
    transition: all 0.4s ease-in-out; /* 替换-webkit-前缀，兼容现代浏览器 */
} 

额外CSS优化建议 #

1. 清理冗余代码：原.thumbnail里的top:-50px; left:-35px;在无position属性时完全无效，属于旧代码残留，建议删除（若需偏移，需配合position: relative/absolute）。
2. 统一过渡属性：将-webkit-transition改为标准transition，现代浏览器均支持，无需单独写前缀。
3. 优化文本响应式：font-size:1.1vw在小屏幕可能过小，用clamp()实现自适应：

.textinimage {
    font-size: clamp(12px, 1.1vw, 18px); /* 最小12px，最大18px，中间按vw缩放 */
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center; /* 确保文本本身居中，增强稳定性 */
}

4. 整合圆角样式：将.rnd的圆角逻辑整合到.thumbnail img中，减少冗余类名：

.thumbnail img.rnd {
    border-radius: 8px; /* 替换为你需要的圆角大小 */
    width: 100%;
    display: block; /* 消除图片下方默认空白间隙 */
}

最终完整代码示例 #

HTML保持不变，调整后的CSS如下：

.thumbnail { 
    position: relative;
    display:inline-block; 
    z-index:999; 
    cursor: pointer; 
    opacity: 0.5;
    transition: all 0.4s ease-in-out;
} 
.thumbnail:hover { 
    transform: scale(1.05);
    opacity: 1;
}

.textinimage {
    font-size: clamp(12px, 1.1vw, 18px);
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    color: white; /* 将<a>内的样式移至此，统一管理 */
}

.thumbnail img.rnd {
    border-radius: 8px;
    width: 100%;
    display: block;
}

内容的提问来源于stack exchange，提问作者Pascal Maier