本文详解如何通过 CSS 正确定义容器与文本的定位关系、动画范围及溢出控制，解决 overflow: hidden 失效问题，确保文字仅在指定区域内平滑滚动且边界外完全不可见。
本文详解如何通过 css 正确定义容器与文本的定位关系、动画范围及溢出控制，解决 `overflow: hidden` 失效问题，确保文字仅在指定区域内平滑滚动且边界外完全不可见。
要实现一段文本在固定尺寸容器中从右向左匀速循环滚动，且严格隐藏容器边界外的所有内容，关键不在于堆砌属性，而在于理解 CSS 定位流与裁剪机制的协同逻辑。
核心问题解析
你遇到的“overflow: hidden 不生效”，根本原因在于：
- .text 使用 position: absolute，但其父容器 .container 未设置 position: relative（或 absolute/fixed），导致绝对定位元素脱离文档流后，参照的是最近的定位祖先（可能为 body），而非你的目标容器；
- 动画终点设为 left: 100%，意味着文本右边缘将移动到容器左边缘，此时文本整体仍大量溢出在容器右侧——即使有 overflow: hidden，也因定位基准错误而无法正确裁剪。
正确实现方案
✅ 必须满足三个前提条件：
- 容器需显式声明 position: relative（建立定位上下文）；
- 文本需使用 position: absolute 并以该容器为定位基准；
- 动画位移范围需确保文本完全进入并穿出容器可视区，推荐从 left: 100%（文本右边缘对齐容器左边缘）→ left: -100%（文本左边缘对齐容器右边缘），覆盖完整滚动路径。
以下是优化后的完整代码：
.container-div {
position: relative; /* ✅ 关键：创建定位上下文 */
white-space: nowrap;
overflow: hidden; /* ✅ 裁剪溢出内容 */
width: 200px;
height: 60px; /* 建议明确高度，避免内容撑开 */
background-color: lightblue;
border: 1px solid #ccc;
}
.text-h6 {
position: absolute;
top: 50%;
transform: translateY(-50%); /* 垂直居中（可选） */
color: #000;
margin: 0;
animation: rightThenLeft 3s linear infinite;
}
@keyframes rightThenLeft {
0% { left: 100%; } /* 文本初始位置：完全在容器右侧外 */
100% { left: -100%; } /* 结束位置：完全在容器左侧外 */
}<div class="container-div"> <p class="text-h6">This is the scrolling text</p> </div>
注意事项与增强建议
- 避免 z-index: -1：它可能导致元素被其他内容遮挡或触发层叠上下文异常，纯裁剪场景无需负层级；
- 动画时长与文本长度匹配：若文本过长，可适当延长 animation-duration 或降低 animation-timing-function 的线性感（如用 ease-in-out 提升自然度）；
- 响应式适配：对移动端，建议用 vw/vmin 替代固定 px 值，并监听 resize 事件动态重置动画（进阶）；
- 无障碍补充：为滚动文本添加 aria-live="off" 防止屏幕阅读器重复播报。
掌握这一定位+裁剪+动画三要素组合，即可稳定复现专业级无缝跑马灯效果，且兼容所有现代浏览器。
