移动端超长文本如何实现自动轮播且不超出单行文本时不滚动？

<code class="vue"><template>
  <div class="container">
    <div class="text-wrapper" :style="{ animationPlayState: behavior }">
      {{ item }}
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onActivated, onDeactivated } from 'vue';

export default {
  setup() {
    const item = ref('这是一段测试文本，长度可能会超过一行。'); // 可替换为动态文本
    const behavior = ref('paused'); // 初始状态为暂停

    const startScroll = () => { behavior.value = 'running'; };
    const stopScroll = () => { behavior.value = 'paused'; };

    onMounted(checkTextLength); // 页面加载后检查文本长度
    onActivated(checkTextLength); // 组件激活时检查文本长度
    onDeactivated(stopScroll); // 组件停用时停止滚动

    const checkTextLength = () => {
      const textWrapper = document.querySelector('.text-wrapper');
      if (textWrapper.scrollWidth > textWrapper.offsetWidth) {
        startScroll();
      } else {
        stopScroll();
      }
    };

    return { item, behavior };
  },
};
</script>

<style scoped>
.container { width: 300px; }
.text-wrapper {
  overflow: hidden;
  white-space: nowrap;
  height: 20px;
  animation: scroll 5s linear infinite; /* 动画定义 */
}
@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style></code>