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属性可以控制滚动速度，单位为秒