本文介绍一种实用方案：仅当容器内文本实际溢出时，才在 hover 时触发动画滚动；若文本完全可见，则禁用动画。纯 css 无法可靠检测溢出，因此需结合轻量 javascript 动态添加/移除滚动类。
在构建响应式 UI 组件（如标签芯片、状态提示栏）时，常需实现“悬停滚动长文本”的交互效果。但若对所有文本统一启用 animation，会导致短文本也出现无意义的位移动画，影响体验与性能。关键挑战在于：CSS 本身不具备检测 offsetWidth > parent.clientWidth 的能力，因此必须借助 JavaScript 进行运行时判定。
✅ 推荐实现方案（轻量 JS + 语义化 CSS）
核心思路是：
- 预定义一个带 hover 动画的 CSS 类（如 .scrolled:hover）；
- 页面加载后，遍历目标元素，对比其 offsetWidth 与父容器可用宽度；
- 仅当文本真实溢出时，才为其添加 .scrolled 类 —— 此时 hover 才会触发动画。
以下是完整可运行代码：
/* 容器基础样式（固定宽度 + 隐藏溢出） */
.chip-container {
max-width: 400px;
height: 32px;
font-size: 0.8125rem;
display: inline-flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
border-radius: 16px;
background-color: #666;
color: white;
margin: 3px;
}
/* 文本内容区（不设宽，依赖内容伸缩） */
.chip-value {
display: inline-block;
position: relative;
margin: 0 5px;
text-overflow: clip; /* 防止 ellipsis 干扰宽度计算 */
}
/* 滚动动画类 —— 仅当存在该类时，hover 才生效 */
.scrolled:hover {
animation: scroll-rtl 15s linear forwards;
}
@keyframes scroll-rtl {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}Very very very very very very very very very very long text...Not long
// 初始化：为所有溢出的 .chip-value 添加 .scrolled 类
document.querySelectorAll('.chip-value').forEach(el => {
const parent = el.parentElement;
// 使用 getComputedStyle 确保获取准确的可用宽度（兼容 padding/margin）
const parentWidth = parent.clientWidth;
if (el.offsetWidth > parentWidth) {
el.classList.add('scrolled');
}
});⚠️ 注意事项与优化建议
- 宽度判定逻辑：使用 el.offsetWidth > parent.clientWidth 而非硬编码 400，确保适配不同尺寸容器（如响应式布局或动态修改 max-width 的场景）；
- 性能考量：该脚本仅在初始化时执行一次，无监听开销；如需支持动态内容更新（如 AJAX 加载），可封装为函数并手动调用；
-
无障碍友好：滚动动画可能对部分用户造成不适，建议在 prefers-reduced-motion: reduce 下禁用动画：
@media (prefers-reduced-motion: reduce) { .scrolled:hover { animation: none; } } - 替代方案提醒：若严格要求零 JS，可考虑 CSS @container 查询（实验性，需开启 flag），但目前兼容性有限，不推荐生产环境使用。
通过此方案，你既能保持 CSS 动画的声明式优雅，又能精准控制交互逻辑 —— 真正实现「有溢出才滚动，无溢出不干扰」的高质量用户体验。
立即学习“前端免费学习笔记（深入）”；
