网页实现新闻联播式连续滚动文字的问题求助

你的问题核心是文本自动换行和动画元素的样式逻辑错误，调整以下几点就能解决：

1. 给包裹所有滚动内容的容器添加white-space: nowrap，强制所有内容在单行显示，禁止折行
2. 让承载滚动内容的容器宽度由内部内容自然撑开，而非被父容器限制，避免内容截断
3. 调整内层内容块的显示方式，确保它们在同一行连续排列

修改后的完整代码如下：

HTML（仅给外层内容容器添加类名，结构不变） #

<div class="ticker-text">
  <span class="ticker-content">
    <span> new music coming soon!! ★ </span>
    <span> Next Show: 924 Gilman in Berkeley on June 3rd, 2023 ★ </span>
    <span> Listen to our latest EP <a href="https://www.moonwaveca.bandcamp.com/album/death-etc" style="text-decoration: underline; color: #0080FF">"death, etc"</a> on all streaming platforms!! ★</span>
  </span> 
</div>  

CSS（关键修改已标注） #

.ticker-text {
  height: 45px;   
  width: 940px;
  overflow: hidden;
  /* 可选：添加背景色方便查看滚动效果 */
  background-color: #000;
}

/* 核心滚动容器样式 */
.ticker-content {
  line-height: 25px;
  display: inline-block; /* 让宽度由内容撑开，不被父容器限制 */
  white-space: nowrap; /* 强制所有内容单行显示 */
  color: #ffffff;
  padding: 10px 0;
  font-size: 25px;
  animation: scroll-left 20s linear infinite;
}

/* 内层内容块保持行内块，确保连续排列 */
.ticker-content span {
  display: inline-block;
}

@keyframes scroll-left {
  0%   {
    transform: translateX(100%);       
  }
  100% {
    transform: translateX(-100%); 
  }
}

@-webkit-keyframes scroll-left {
  0%   {
    -webkit-transform: translateX(100%);       
  }
  100% {
    -webkit-transform: translateX(-100%); 
  }
}

原理说明 #

• white-space: nowrap彻底禁用文本折行，所有内容会在同一行连续排列
• display: inline-block让滚动容器的宽度由内部内容决定，确保动画滚动时能完整展示所有内容，不会被父容器宽度截断
• 内层span设为inline-block，既保持每个内容块的独立性，又能在单行连续滚动

这样修改后，所有内容就会像新闻联播那样在单行无限滚动，不会再出现折行截断的问题。

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