如何限制滚动字幕（Ticker）文本显示范围？CSS技术求助

要让滚动字幕仅在OPL logo右侧到「CURRENT MATCH...」左侧的区域内显示，核心思路是用一个父容器作为可视区域的遮罩，再通过CSS动画控制字幕在这个遮罩内滚动，超出部分自动隐藏。你的padding/margin无效是因为单独给字幕元素设置overflow:hidden无法实现外部区域的裁剪，必须依赖父容器的范围限制。

步骤1：添加父容器结构 #

先给滚动字幕套一个父容器，用来限定显示范围：

<div class="crawler__container">
  <div class="crawler__crawl-text">这里是你的滚动字幕内容</div>
</div>

步骤2：配置父容器的遮罩样式 #

父容器的位置和宽度必须精确对应OPL logo右侧到「CURRENT MATCH...」左侧的区间，用浏览器开发者工具测量好坐标后设置：

.crawler__container {
  position: absolute;
  left: [OPL logo右侧的像素值]; /* 例：500px，根据实际布局调整 */
  width: [区间宽度]; /* 例：1200px，即「CURRENT MATCH...」左侧x坐标 - OPL logo右侧x坐标 */
  height: 25px; /* 和字幕的line-height保持一致，确保完整显示 */
  overflow: hidden; /* 关键：隐藏超出容器范围的字幕内容 */
  top: 2px; /* 和原字幕的margin-top值保持一致 */
}

步骤3：修改字幕的样式与滚动动画 #

去掉原CSS中无效的padding/margin，改用transform实现平滑滚动，同时确保字幕不换行：

.crawler__crawl-text {
  /* 移除无效的padding和margin */
  padding-right: 0;
  padding-left: 0;
  margin-top: 0;
  
  font-size: 25px;
  font-variation-settings: 'wdth' 80,'wght' var(--font-weight);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 25px;
  color: var(--color4);
  font-family: bison, Helvetica, sans-serif;
  
  /* 关键设置 */
  position: relative;
  white-space: nowrap; /* 禁止字幕换行 */
  animation: ticker-scroll 20s linear infinite; /* 20s为滚动时长，可按需调整 */
}

/* 定义滚动动画：从父容器右侧外进入，到左侧外出 */
@keyframes ticker-scroll {
  0% {
    transform: translateX(100%); /* 初始位置：字幕完全在父容器右侧（OPL logo后方） */
  }
  100% {
    transform: translateX(-100%); /* 结束位置：字幕完全在父容器左侧（CURRENT MATCH前方） */
  }
}

关键说明 #

• 父容器的overflow:hidden是实现区域裁剪的核心，它会把超出自身范围的字幕内容完全隐藏，正好符合你要的「从OPL logo后出现，到CURRENT MATCH前消失」的效果。
• 动画的translateX(100%)和translateX(-100%)确保字幕滚动的起始和结束位置完全贴合父容器的边界，不会出现提前显示或延迟消失的问题。
• 务必保留white-space: nowrap，否则长字幕会自动换行，破坏滚动效果。

内容的提问来源于stack exchange，提问作者Rad-DMC