自动滚动时隐藏溢出文本（不删除）的实现方案

要实现你需要的滚动标题（父容器作为遮罩，文本不截断、不垂直排列），修正以下核心设置即可：

• 父容器添加overflow: hidden和position: relative，实现遮罩同时锚定子元素定位
• 子标题添加white-space: nowrap强制文本单行显示，解决垂直排列问题
• 调整动画逻辑，让滚动距离匹配文本与容器的宽度差，实现完整循环

修正后的代码 #

.example1 {
  margin-left: 100px;
  height: 50px; 
  width: 100px;
  border: 10px solid red;
  overflow: hidden; /* 隐藏溢出文本，作为遮罩 */
  position: relative; /* 让子元素绝对定位基于当前容器 */
}
.example1 h3 {
  position: absolute;
  width: auto;
  margin: 0;
  line-height: 50px;
  text-align: left;
  border: 10px solid black;
  white-space: nowrap; /* 强制文本不换行 */
  
  animation: scrollTitle 10s linear infinite;
}

@keyframes scrollTitle {
  0% {
    transform: translateX(0);
  }
  50% {
    /* 滚动到文本完全移出容器的位置，100px为父容器宽度 */
    transform: translateX(calc(-100% + 100px));
  }
  100% {
    transform: translateX(0);
  }
}

<div class="example1">
   <h3>This is a really long title that doesn't fit</h3>
</div>

关键说明 #

1. 父容器配置：overflow: hidden负责隐藏溢出的文本，position: relative确保子元素的绝对定位不会脱离父容器范围
2. 单行文本控制：white-space: nowrap是解决文本垂直排列的核心，强制文本保持一行显示
3. 动画逻辑优化：通过calc计算滚动距离，让文本滚动到刚好完全离开容器后回到起点，实现流畅的循环效果，可根据需求调整动画时长

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