如何根据文本长度优化marquee跑马灯动画，避免滚动时文本截断

问题根因 #

你当前的实现存在3个核心问题导致长文本截断：

• 动画终点left: -100%中的百分比是相对于父容器宽度计算，和文本自身长度无关，文本长度超过父容器2倍时就会滚不完就重置
• 给滚动文本设置了固定width: 1000%，既限制了超长文本的展示，短文本时又会出现大量空白
• 动画时长固定为20s，和文本长度不匹配，文本越长滚动相同距离需要的时间越长，固定时长会导致长文本还没完全滚出就重置
• 附带的语法错误：-webkit-animation-timing-function: infinite是错误写法，infinite是动画循环次数的属性值

优化方案 #

优化后CSS代码 #

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

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

#marquee {
  color: var(--gray-dark);
  width: 100%;
  overflow: hidden;
  position: relative;
}

#announcement_text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%; /* 保证文本初始位置在父容器右侧外，不会一开始就出现 */
  animation: slide linear infinite;
  /* 动画时长可通过CSS变量动态传入，也可手动设置，示例默认20s */
  animation-duration: var(--marquee-duration, 20s);
  -webkit-animation: slide linear infinite;
  -webkit-animation-duration: var(--marquee-duration, 20s);
}

优化后HTML代码 #

<div class="d-flex justify-content-between align-items-center breaking-news bg-white">
  <div class="d-flex flex-row flex-grow-1 flex-fill justify-content-center bg-danger py-2 text-white news">
    <span class="d-flex align-items-center">&nbsp;&nbsp;<i class="far fa-newspaper"></i>&nbsp;&nbsp;</span>
  </div>
  <div id="marquee">
    <div style="color:black; padding-left:5px;" id="announcement_text">
      任意长度的文本内容都可以正常滚动不会截断
    </div>
  </div>
</div>

可选：动态适配文本长度调整滚动速度（JS代码） #

如果需要不管文本多长，滚动速度保持一致，可以加这段JS自动计算动画时长：

window.addEventListener('load', () => {
  const marqueeText = document.getElementById('announcement_text');
  const marqueeContainer = document.getElementById('marquee');
  // 速度可自定义，单位：像素/秒，示例50px/s
  const speed = 50;
  // 总滚动距离 = 文本宽度 + 父容器宽度
  const totalDistance = marqueeText.offsetWidth + marqueeContainer.offsetWidth;
  const duration = totalDistance / speed;
  // 给CSS变量赋值
  marqueeText.style.setProperty('--marquee-duration', `${duration}s`);
})

改动说明 #

• 用transform: translateX替代left定位，性能更好，且百分比是相对于元素自身宽度计算，translateX(-100%)可以保证文本完全滚出父容器左侧才会重置
• 去掉了滚动文本的固定宽度设置，改为inline-block，宽度完全由内容自身决定，适配任意长度文本
• 新增padding-left: 100%保证文本初始位置在父容器右侧外，不会刚加载就出现在视野里
• 新增JS动态计算时长的可选方案，保证不同长度文本的滚动速度一致，不会出现短文本滚的太慢、长文本滚的太快的问题

内容的提问来源于stack exchange，提问作者Ariel Joseph Mariano Rivera