如何检测元素内容是否溢出 仅溢出时触发文本往返滚动动画

现有代码直接给所有文本元素硬绑定动画，既没有做内容溢出判断，动画位移值还写死了固定的340px，无论文本长短都会强制执行平移动画，短文本自然会被错误拉动，不符合预期。
纯CSS没有提供直接检测子元素是否溢出父容器的能力，必须配合少量JS做判断，才能实现「仅溢出内容加动画」的效果。

1. 修正CSS代码 #

把动画类和默认文本样式拆分，用CSS变量接收动态计算的位移值，替换原来硬编码的固定偏移量，避免动画位移不准的问题：

.animated {
  position: relative;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  background: #0c0c0c;
}

.text-content {
  color: #fff;
  margin: 0;
  /* 无溢出时默认静态，无动画 */
}

/* 仅溢出文本会被添加该类，触发动画 */
.text-animated {
  animation: backAndForth 5s linear infinite;
}

@keyframes backAndForth {
    0% { transform: translateX(0); }
    10% { transform: translateX(0); }
    45% { transform: translateX(var(--translate-distance)); }
    55% { transform: translateX(var(--translate-distance)); }
    90% { transform: translateX(0); }
    100% { transform: translateX(0); }
}

2. 调整HTML结构 #

去掉标签上硬写的text-animated类，改用通用文本类text-content，后续由JS动态判断是否需要加动画类：

<div class="animated">
  <h3 class="text-content">
    Some Short Text
  </h3>
</div>
<span>短文本保持静态</span>

<br><br><br>

<div class="animated">
  <h3 class="text-content">
    Some Long And Bigger Text To Animate
  </h3>
</div>
<span>长文本自动触发往返平移动画，可查看全部内容</span>

3. 添加JS检测逻辑 #

遍历所有文本容器，对比文本元素的实际滚动宽度和容器的可视宽度：如果文本宽度大于容器宽度，说明内容溢出，此时计算刚好展示全部文本需要的偏移距离，赋值给CSS变量后再给文本添加动画类；未溢出的文本不做任何处理，保持静态。

document.addEventListener('DOMContentLoaded', () => {
  const containers = document.querySelectorAll('.animated');
  containers.forEach(container => {
    const textEl = container.querySelector('.text-content');
    // 计算溢出的宽度
    const overflowGap = textEl.scrollWidth - container.clientWidth;
    if (overflowGap > 0) {
      // 动态设置位移值：向左移动溢出的宽度，刚好展示完全部文本
      textEl.style.setProperty('--translate-distance', `-${overflowGap}px`);
      textEl.classList.add('text-animated');
    }
  })
})

可选适配：响应窗口尺寸变化 #

如果页面需要适配不同屏幕宽度，可以加一个resize监听，窗口尺寸变化时重新检测溢出状态、计算偏移量，避免窗口缩放后动画位移不准：

window.addEventListener('resize', () => {
  const containers = document.querySelectorAll('.animated');
  containers.forEach(container => {
    const textEl = container.querySelector('.text-content');
    // 先重置之前的动画状态
    textEl.classList.remove('text-animated');
    textEl.style.removeProperty('--translate-distance');
    // 重新计算
    const overflowGap = textEl.scrollWidth - container.clientWidth;
    if (overflowGap > 0) {
      textEl.style.setProperty('--translate-distance', `-${overflowGap}px`);
      textEl.classList.add('text-animated');
    }
  })
})

• 无硬编码位移值，自动适配任意长度文本、任意宽度容器，动画位移精准，不会出现露空白、内容展示不全的问题
• 仅溢出的长文本会被添加动画，短文本完全保持静态，符合预期
• 逻辑轻量，无额外依赖

内容的提问来源于stack exchange，提问作者Hadi Rajabi