Text Marquee文本截断问题：长文本无法完整滚动，求CSS解决方案

我明白你遇到的困扰了——想让超长文本通过滚动组件完整展示，但文本总是在开头部分就被截断。别担心，咱们用纯CSS就能完美解决这个问题，而且比过时的<marquee>标签更灵活可控。

问题根源分析 #

从你提供的代码片段来看，主要问题集中在这几点：

• 给h1设置的width:150%是固定比例，一旦文本长度超过这个宽度，就会自动换行；
• 没有强制文本保持单行显示，换行后的内容会被容器的overflow:hidden截断；
• 固定宽度无法适配任意长度的超长文本。

纯CSS完整解决方案 #

下面是能让超长文本流畅完整滚动的实现代码，适配所有长度的内容：

HTML结构

<div class="scroll-left">
  <h1>这里放你的超长文本内容，不管多长都能完整滚动——比如Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h1>
</div>

CSS样式

.scroll-left {
  height: 100px;
  overflow: hidden;
  position: relative;
  /* 可选：给容器加背景，更直观看到滚动效果 */
  background: #f5f5f5;
}

.scroll-left h1 {
  position: absolute;
  top: 0;
  left: 100%; /* 初始位置在容器右侧外，确保从外部滑入 */
  margin: 0;
  padding: 20px 0;
  white-space: nowrap; /* 核心：强制文本始终单行显示 */
  width: fit-content; /* 宽度自适应文本内容，彻底告别固定比例限制 */
  animation: scroll-left 20s linear infinite; /* 滚动动画：时长20秒，匀速，无限循环 */
}

/* 定义滚动动画逻辑 */
@keyframes scroll-left {
  0% {
    left: 100%; /* 动画起始：文本在容器右侧 */
  }
  100% {
    left: -100%; /* 动画结束：文本完全滚出容器左侧，确保超长文本也能完整走完 */
  }
}

关键细节说明 #

• white-space: nowrap：这是解决截断问题的核心，强制文本永远保持单行，不会自动换行；
• width: fit-content：让h1的宽度刚好容纳所有文本，彻底避免固定百分比不够用的情况；
• 动画起止位置：left:100%让文本从容器右侧滑入，left:-100%确保哪怕文本比容器宽数倍，也能完全滚出左侧，不会中途停止；
• 动画时长：可以根据文本长度调整20s，文本越长，时长设得越长，滚动速度会更舒适。

额外优化建议 #

• 想要调整滚动速度？直接修改动画的20s数值即可，数值越大速度越慢；
• 想让文本垂直居中？给h1加上line-height: 100px;（和容器的height保持一致）；
• 循环滚动：infinite属性已经实现了文本滚动到末尾后自动重新开始，无需额外设置。

这样修改后，你的超长文本就能完整、流畅地滚动展示啦！

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