dw文字连续滚动中间无空白，怎么设置

Question

利用marguee实现了页面滚动，怎样改成连续滚动，文字衔接没有留白

Answer 1

可以尝试使用 CSS 属性 white-space 并将其设置为 nowrap 来消除滚动中的空白
HTML

<div class="scrolling-text">
  <span>Text 1</span>
  <span>Text 2</span>
  <span>Text 3</span>
  ...
</div>

CSS

.scrolling-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}
.scrolling-text span {
  display: inline-block;
  padding-right: 50px; /* 调整间距 */
  animation: marquee 15s linear infinite; /* 调整滚动速度和时间 */
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); } /* 从左向右无限循环滚动 */
}

以上 CSS 样式中
1、使用 white-space: nowrap 将文字设置为连续滚动
2、使用 overflow: hidden 隐藏超出部分
3、使用 padding-right 调整间距
4、通过 animation 属性添加动画效果，在 @keyframes 中设置滚动方向和时间，实现无限循环滚动。