CSS动画空白：nowrap；

Question

我正在做一个css动画，它将使文本从屏幕的右侧开始，向左移动，回绕并重复。

我有一些很大的字母，所以我正在做

white-space: nowrap;

因此文本不会下移到另一行。

我使用

可以很好地滚动动画

0% {
    transform: translateX(5%)
}
100% {
    transform: translateX(-100%)
}

我放

animation: animation-name 5s infinite;
animation-timing-function: linear;

在班上

我唯一的问题是大字母和空格的：nowrap导致页面宽度增大，因为字母推动了页面宽度。有没有办法解决这个问题，使动画仍然滚动但不增加页面宽度？

上面的示例图片。

Answer 1

只需将overflow-x: hidden放在班级的家长中。

body {
  overflow-x: hidden;
}

div {
  font-size: 150px;
  white-space: nowrap;
  animation: animation-name 5s infinite;
  animation-timing-function: linear;
}

@keyframes animation-name {
  0% {
    transform: translateX(5%)
  }
  100% {
    transform: translateX(-100%)
  }
}

<div>
  Some pretty large letters
</div>