本文介绍如何使用 javascript 批量检测多个文本容器的溢出状态，并为超出宽度的文本自动添加 css 动画类，避免重复编写单个元素逻辑，提升代码可维护性与扩展性。
在实际开发中，常需为列表式标题（如动漫名、商品名、文章标题等）实现“自动滚动动画”——当文本内容宽度超过容器时，才启用横向滚动动画（如 marquee 效果），否则保持静态显示。原始代码仅针对单一 ID（#one）硬编码处理，难以复用；而真实页面往往包含 10+ 甚至数十个同类项，逐一手动改写既低效又易出错。
解决方案是基于类名批量选取 + 循环判断，利用 document.querySelectorAll() 获取所有目标容器和对应文本节点，再通过索引一一配对检测：
// 批量获取所有文本容器与内部 span 元素
const containers = document.querySelectorAll(".text-container");
const texts = document.querySelectorAll(".text-container span");
// 遍历每一对容器与文本，判断是否需要启用动画
for (let i = 0; i < containers.length; i++) {
const container = containers[i];
const text = texts[i];
// 安全检查：确保对应 span 存在
if (!text) continue;
// 若文本自然宽度 > 容器可视宽度，则添加动画类
if (container.clientWidth < text.scrollWidth) {
text.classList.add("animate");
}
}✅ 关键优化说明：
- 使用 .text-container span 精确选取每个容器内的 ，避免全局 span 误匹配；
- 用 scrollWidth 替代 clientWidth 检测文本真实宽度（clientWidth 仅返回渲染后可见宽，而 scrollWidth 包含溢出部分，更准确）；
- 增加 if (!text) continue 防御性检查，防止 DOM 结构不一致导致脚本中断；
- 无需修改 HTML 结构——只需为所有待处理项统一添加 class="text-container" 即可，例如：
<div class="text-container"> <span>Campfire Cooking in Another World with my Absurd Skill</span> <div class="fader fader-left"></div> <div class="fader fader-right"></div> </div> <div class="text-container"> <span>Tower of God</span> <div class="fader fader-left"></div> <div class="fader fader-right"></div> </div> <!-- 可无限追加... -->
⚠️ 注意事项：
- 确保 CSS 中已定义 .animate 类（如 animation: scrollText 15s linear infinite），并设置 white-space: nowrap; overflow: hidden; 等基础样式；
- 脚本需在 DOM 加载完成后执行（推荐包裹在 DOMContentLoaded 事件或置于
