CSS卡片内Marquee文本滚动异常求助：需实现无限无截断滚动

你的问题出在原方案用伪元素复制文本，但动画滚动到-100%时，原文本和伪元素内容会一起移出容器，导致出现空白截断；同时动态内容的伪元素同步也容易出问题。下面是能实现类似旧<marquee>标签流畅无限滚动的方案：

核心思路 #

通过直接复制一份文本节点，让两个相同文本并排显示，滚动时第一个文本完全移出容器后，第二个文本刚好衔接上来，配合滚动距离为单份文本宽度的动画，实现无缝循环。

修改后的代码 #

CSS

.card{
  width: 50%;
  padding: 100px 20px;
  background: gray;
  color: white;
  margin-bottom: 20px;
}
.marquee {
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  width: 100%;
  box-sizing: border-box;
}
.marquee-content {
  display: flex;
  animation: marquee 5s linear infinite;
  will-change: transform;
}
.marquee-content > * {
  flex-shrink: 0;
  margin-right: 50px; /* 控制两份文本之间的间距 */
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

HTML

<div class="card">
  <div class="marquee">
    <div class="marquee-content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

<div class="card">
  <div class="marquee">
    <div class="marquee-content">
      <p>Lorem ipsum dolor sit  amet consec</p>
      <p>Lorem ipsum dolor sit  amet consec</p>
    </div>
  </div>
</div>

动态内容适配 #

如果文本是动态更新的，需要同步更新两份文本节点，还可以根据文本长度调整动画时长，保持滚动速度一致：

// 更新滚动文本的工具函数
function updateMarqueeText(marqueeEl, newText) {
  const contentContainer = marqueeEl.querySelector('.marquee-content');
  // 清空原有内容
  contentContainer.innerHTML = '';
  
  // 创建两份相同的文本节点
  const textNode1 = document.createElement('p');
  textNode1.textContent = newText;
  const textNode2 = document.createElement('p');
  textNode2.textContent = newText;
  
  contentContainer.appendChild(textNode1);
  contentContainer.appendChild(textNode2);
  
  // 可选：根据文本长度计算动画时长，保持滚动速度统一
  const singleTextWidth = textNode1.offsetWidth;
  const scrollSpeed = 120; // 每秒滚动120像素，可按需调整
  const totalScrollDistance = singleTextWidth + 50; // 50是两份文本的间距
  const animationDuration = totalScrollDistance / scrollSpeed;
  
  contentContainer.style.animationDuration = `${animationDuration}s`;
}

// 使用示例：更新第一个卡片的滚动文本
const targetMarquee = document.querySelectorAll('.marquee')[0];
updateMarqueeText(targetMarquee, '这是更新后的动态滚动文本');

方案优势 #

• 完全避免截断和空白问题，滚动衔接自然流畅
• 动态内容更新时只需同步两份文本节点，逻辑简单
• 可通过调整动画时长保持不同长度文本的滚动速度一致

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