CSS动画空白：nowrap；

Question

I'm working on doing a css animation that would make text start at the right side of the screen, go to the left, the wrap back around and repeat.

I have some pretty large letters so I'm doing

white-space: nowrap;

so the text does not go down to another line.

I got the animation scrolling fine with

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

and I put

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

in the class

Only problem I have is that the with the big letters and the white-space: nowrap is causing the page width to increase in size because the letters are pushing the page width. Is there a way around this so that the animation will still scroll but not push the page width?

example picture above.

Answer 1

Just put overflow-x: hidden in the class's parent.

 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>