如何让这个交替滚动的文本不超出其父元素的宽度或边数？

要让交替滚动的文本不超出其父元素的宽度或边界，可以使用CSS的overflow属性来控制元素的溢出行为。

首先，确保父元素具有适当的宽度或边界，可以使用CSS的width或max-width属性来设置。

然后，在父元素中创建一个包含滚动文本的子元素，例如一个<div>或<span>元素。

接下来，为父元素设置CSS属性overflow为hidden，这将隐藏超出父元素宽度或边界的内容。

然后，为滚动文本的子元素设置CSS属性white-space为nowrap，这将防止文本换行。

接着，为滚动文本的子元素设置CSS属性animation来创建一个水平滚动的动画效果。例如，可以使用@keyframes来定义一个从右到左的动画，然后将animation属性应用于子元素。

最后，根据需要调整滚动速度、持续时间和延迟等动画属性，以实现滚动效果。

以下是一个示例代码：

HTML:

<div class="parent">
  <div class="scrolling-text">这是滚动的文本内容</div>
</div>

CSS:

.parent {
  width: 300px; /* 设置父元素的宽度 */
  overflow: hidden; /* 隐藏超出父元素宽度的内容 */
}

.scrolling-text {
  white-space: nowrap; /* 防止文本换行 */
  animation: scroll 5s linear infinite; /* 创建滚动动画效果 */
}

@keyframes scroll {
  0% { transform: translateX(100%); } /* 从右侧开始滚动 */
  100% { transform: translateX(-100%); } /* 滚动到左侧结束 */
}

在上述示例中，父元素的宽度被设置为300px，超出这个宽度的内容将被隐藏。滚动文本的子元素被设置为不换行，并应用了一个水平滚动的动画效果，持续时间为5秒，无限循环。

请注意，这只是一种实现滚动文本不超出父元素宽度或边界的方法，具体实现方式可能因具体需求和场景而有所不同。