CSS文字超出文本框实现滚动播放 - 无缝循环效果

可以使用 CSS 的 text-overflow 和 white-space 属性以及 animation 动画来实现文字滚动播放：

1. text-overflow 设置为 'marquee'，表示启用滚动播放效果；
2. white-space 设置为 'nowrap'，表示不允许换行；
3. animation 动画设置为无限循环，从文本框左侧开始滚动，滚动结束后回到文本框左侧重新开始滚动。

具体代码如下：

<style>
    .scroll-text {
        width: 300px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: marquee;
        animation: scroll 10s linear infinite;
    }
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
</style>
<div class="scroll-text">这是一段需要滚动播放的文本，滚动到头从头开始，隐藏掉的部分从另一头出现。</div>

其中，animation 的 duration 属性可以控制滚动速度，单位为秒。