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%);
  }
}
``