实现文本滚动动画时如何隐藏div外文本？overflow:hidden失效排查

问题说明 #

想要实现文本从右到左滚动的动画效果，但超出div范围的文本无法隐藏，即使设置了over-flow:hidden也未生效。

问题原因及修复方案 #

• 属性名拼写错误：你把overflow写成了over-flow，多余的横杠导致隐藏规则不生效，修正为overflow: hidden即可。
• 动画方向不符合需求：当前动画是文本从左向右移动（left从0%到100%），若要实现从右到左滚动，需调整动画起始/结束位置，让文本从容器右侧外部开始，滚动至左侧外部完全消失。
• 文本换行干扰：给滚动文本添加white-space: nowrap，确保文本始终单行显示，避免换行导致的布局混乱。

修改后的完整代码 #

CSS代码 #

.container{
    position: relative;
    overflow: hidden; /* 修正属性名 */
    width: 200px;
    height: 200px;
    background-color: #f325;
}

.text{
    color: #000;
    position: absolute;
    white-space: nowrap; /* 防止文本换行 */
    animation: rightToLeft 3s linear infinite;
}

@keyframes rightToLeft {
    0%   {left: 100%;} /* 从容器右侧外起始 */
    100%  {left: -100%;} /* 滚动至左侧外完全消失 */
}

HTML代码 #

<div class="container">
  <p class="text">There is my text</p>
</div>

内容的提问来源于stack exchange，提问作者Mohammad Vard