应为滚动文字溢出容器时需组合使用white-space: nowrap、固定宽高父容器、overflow: hidden及translateX(-100%)动画，并用JS动态判断内容宽度是否超限，监听字体加载与窗口缩放以重置动画。
滚动文字不换行却溢出容器怎么办
直接用 white-space: nowrap 确实能阻止换行，但若容器宽度小于文字总宽，又没配好 overflow 和滚动机制，文字就会被截断或撑开父容器。关键不是“加了 nowrap 就自动滚动”，而是要配合容器尺寸控制和滚动触发条件。
-
white-space: nowrap必须作用在滚动内容的直接容器上（比如），不能只加在父层- 父容器需设固定宽高 +
overflow: hidden，否则滚动区域不可控- 若用 CSS
@keyframes实现滚动，内容宽度必须大于父容器宽，否则动画位移无效果——可用getBoundingClientRect().width在 JS 中动态测实际宽度用 CSS animation 做自适应滚动长度的 marquee
纯 CSS 方案最轻量，但“自适应”意味着不能写死
transform: translateX(-xxxpx)。正确做法是让动画终点依赖内容宽度，用100%或max-content配合inline-block容器实现。- 滚动容器设
display: inline-block; white-space: nowrap;，让其宽度由文字自然撑开 - 外层盒子设
overflow: hidden; width: 100%;（或具体 px/em） - 动画用
translateX(-100%)而非绝对像素值，这样无论文字多长，都能滚完全部内容 - 注意：若文字极短（
width ），会白屏滚动——需加 JS 判断是否启用动画：if (content.offsetWidth > container.offsetWidth) { /* 启用动画 */ }
JS 动态计算并启动滚动的边界情况
用户缩放页面、字体加载延迟、中英文混排导致宽度突变时，CSS 动画容易失步。此时需用 JS 监听
resize和fontload（或用document.fonts.load()），重新测量并重置动画。- 避免在
DOMContentLoaded时就测宽——WebFont 可能未就绪，测出来偏小 - 用
requestAnimationFrame套一层再测，确保样式已生效：requestAnimationFrame(() => { const w = el.scrollWidth; }) - 重置动画要清空
animation再重设，否则浏览器可能跳过重绘：el.style.animation = 'none'; setTimeout(() => el.style.animation = 'marquee 10s linear infinite');
移动端 touch 滚动与 iOS Safari 的兼容陷阱
iOS Safari 对
overflow: scroll的 marquee 容器有默认弹性回弹，且will-change: transform在某些版本下会让文字模糊。用 CSS animation 滚动时，iOS 15+ 还可能出现动画卡顿。立即学习“前端免费学习笔记（深入）”；
- 禁用弹性滚动：给滚动容器加
-webkit-overflow-scrolling: none;（仅限旧版 iOS）或更稳妥地用overscroll-behavior: contain; - 防文字模糊：避免对含文字的元素设
transform: translateZ(0)，改用backface-visibility: hidden;+perspective: 1000; - 动画卡顿：把动画时长设为动态值（如
duration = contentWidth / 60 + 's'），避免固定 3s–5s 在长文本下过快、短文本下过慢
实际滚动逻辑的复杂点不在“怎么让它动”，而在于“什么时候不该动”——内容比容器窄时静默、字体加载中延迟初始化、窗口缩放后及时重算、iOS 下绕过渲染缺陷。这些判断漏掉任意一个，都会让用户看到空白、闪动或卡死。
- 父容器需设固定宽高 +
