javascript - DIV 不能像 Marquee 那样正确滚动

Question

作为<marquee>标签已贬值。我创建了一个简单的 CSS 来从右向左滚动我的 DIV。

<style>
 #scroll-container {
  overflow: hidden;
}

#scroll-text {
  transform: translateX(100%);
  animation: my-animation 15s linear infinite;
}

@keyframes my-animation {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
  }
</style>
    
    
<div id="scroll-container">
  <div id="scroll-text"> </div></div>


<script type="text/javascript" src="https://script.google.com/macros/s/AKfycbwrQBGLeIphnholKad8gvarUZ4wsMEiG9PlboMiuuB6lxW4l_UnjTuxouy2NRZkeSAd/exec"></script>
<script>
document.getElementById("scroll-text").innerHTML = marq1 + " " + "<b> <span style='color: #A000ff;'>" + marq2 + "</span> </b>" + " " + marq3 + " " + marq4 ;
</script>

它应该像字幕行为一样滚动，

但不是 1 行，而是滚动 3 行。

如何解决这个问题？

This is my Web Page

下面是移动设备截屏

Answer 1

试试这个，这应该可以解决问题。

<style>
 #scroll-container {
  overflow: hidden;
  white-space: nowrap; /*add this*/
}

#scroll-text {
  transform: translateX(100%);
  animation: my-animation 15s linear infinite;
}

@keyframes my-animation {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
  }
</style>