如何实现文本单行显示且沿X轴持续循环滚动效果

核心调整点 #

• 给.news新增white-space: nowrap属性，强制文本不换行，始终保持单行展示
• 给.news新增display: inline-block属性，让元素宽度由实际文本长度撑开，而非继承父容器宽度
• 调整动画位移逻辑，适配滚动需求，默认实现从右向左的常规跑马灯效果

完整修改后代码 #

CSS 代码 #

.holder {
  background: #ccc;
  padding: 0.5rem;
  overflow: hidden;
  /* 可根据实际需求调整父容器宽度，不设置则默认占满整行 */
  width: 400px;
}
.news {
  animation: slide 10s linear infinite;
  /* 强制单行展示 */
  white-space: nowrap;
  /* 宽度由文本内容撑开 */
  display: inline-block;
}

@keyframes slide {
  0% {
    /* 初始位置在父容器右侧外部 */
    transform: translateX(100%);
  }
  100% {
    /* 结束位置在父容器左侧外部 */
    transform: translateX(-100%);
  }
}

HTML 代码 #

<div class="holder">
  <div class="news">a lot of text a lot of text a lot of text a lot of text</div>
</div>

可选优化：无缝滚动效果 #

如果需要消除滚动到末尾的跳变间隙，实现完全无缝的滚动，可以复制一份文本节点，调整代码如下：

调整后CSS #

.holder {
  background: #ccc;
  padding: 0.5rem;
  overflow: hidden;
  width: 400px;
  /* 让两份文本横向排列 */
  display: flex;
}
.news {
  animation: slide 10s linear infinite;
  white-space: nowrap;
  /* 可调整两份文本之间的间距 */
  padding-right: 30px;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 位移一份文本的宽度，刚好让第二份文本衔接第一份的位置 */
    transform: translateX(-100%);
  }
}

调整后HTML #

<div class="holder">
  <div class="news">a lot of text a lot of text a lot of text a lot of text</div>
  <div class="news">a lot of text a lot of text a lot of text a lot of text</div>
</div>

如果需要从左向右滚动，只需要把@keyframes里的0%和100%的位移值互换即可。

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