DIV无法像Marquee正常滚动，多行滚动问题如何修复？

由于<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>

原本要模拟Marquee的单行滚动行为，但实际出现了三行滚动的问题。

修复方案 #

核心问题是文本在容器内自动换行，只需给滚动文本容器添加强制不换行的样式：

• 给#scroll-text添加white-space: nowrap;，强制所有文本保持单行显示
• 可选：给#scroll-container设置固定高度（比如height: 1.5em;），避免容器高度随换行内容变化

修改后的完整代码：

<style>
 #scroll-container {
  overflow: hidden;
  height: 1.5em; /* 可选，根据文本大小调整 */
}

#scroll-text {
  transform: translateX(100%);
  animation: my-animation 15s linear infinite;
  white-space: nowrap; /* 关键：强制文本不换行 */
}

@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>

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