background-clip:text大文本滚动平移时背景被视口截断问题求助

我希望通过滚动时应用负translate-x动画，让高度占满视口、宽度超出视口的超大文本移动，实现静态图片随文本动画逐渐显现的效果。但当前遇到的问题是，使用background-image结合background-clip: text实现的文本，背景图始终被可视视口裁剪，文本左移后部分内容无法显示。

代码示例 #

HTML代码 #

<main>
  <p class="text-clipped">Test</p>
  <p class="text-colored">Test</p>
</main>

CSS代码 #

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: black;
  background-color: white;
}

.text-clipped {
  font: bolder 50vh 'Alfa Slab One';
  text-align: center;
  margin: 0;
  background: url('https://rpsthecoder.github.io/img-repo/Taitō%20by%20Jezael%20Melgoza.jpg');
  background-size: contain;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.text-colored {
  margin-top: 0px;
  font: bolder 50vh 'Alfa Slab One';
  text-align: center;
  color: green;
}

当前现象 #

横向滚动时会发现：

• 带有背景图的文本「Test」无法完整显示，超出视口的部分背景被截断
• 纯绿色的文本「Test」可正常显示完整内容

目标效果 #

解决方案 #

问题根源在于：使用background-clip: text时，背景图的绘制范围默认受限于元素的可视尺寸。当文本超出视口时，元素宽度仍为视口宽度，导致背景图无法覆盖全部文本内容。

修改.text-clipped的CSS属性，让元素宽度适配文本实际宽度，并调整背景图尺寸匹配文本：

.text-clipped {
  font: bolder 50vh 'Alfa Slab One';
  text-align: center;
  margin: 0;
  background: url('https://rpsthecoder.github.io/img-repo/Taitō%20by%20Jezael%20Melgoza.jpg');
  background-size: auto 100%; /* 背景高度匹配文本高度，宽度自适应 */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  white-space: nowrap; /* 禁止文本换行，确保内容在一行 */
  width: fit-content; /* 元素宽度适配文本实际内容 */
}

修改后，元素宽度会跟随文本内容自动调整，背景图也会覆盖整个文本范围，滚动时就不会出现背景截断的问题，从而实现目标的滚动动画效果。

内容的提问来源于stack exchange，提问作者bitsmyth