CSS 文字滚动播放：超出文本框长度时的滚动效果

可以使用 CSS 属性 'overflow' 和 'white-space' 来实现文字超出文本框长度时的滚动播放效果。具体步骤如下：

设置文本框的宽度和高度，并将 'overflow' 属性设置为 'hidden'，使超出文本框长度的部分被隐藏。

.textbox {
  width: 300px;
  height: 100px;
  overflow: hidden;
}

将文本框内的文本元素的 'white-space' 属性设置为 'nowrap'，使文本在一行内显示，并且不换行。

.textbox p {
  white-space: nowrap;
}

使用 CSS 动画将文本元素沿着 X 轴方向向左滚动，并在滚动到文本框长度的末尾时，将其恢复到初始位置重新开始滚动，实现滚动播放的效果。

.textbox p {
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

完整的代码示例如下：

<div class='textbox'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo, dolor vel feugiat luctus, ipsum elit consequat tortor, quis euismod tortor ex a quam. Aliquam euismod enim sed sapien ornare, vel suscipit quam interdum. Etiam id turpis id lectus commodo malesuada. Maecenas congue magna eu mi maximus, sit amet bibendum lorem faucibus. Donec sit amet ligula vel sapien porta auctor. Integer ac ex risus. Phasellus accumsan, justo eget commodo tincidunt, urna nulla rutrum mauris, at bibendum dolor leo nec felis. Suspendisse vulputate eleifend nisi, in pharetra turpis.</p>
</div>

.textbox {
  width: 300px;
  height: 100px;
  overflow: hidden;
}

.textbox p {
  white-space: nowrap;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}