Prevent horizontally moving text from creating horizontal scroll

[Jay Zhang]

Hi. In the following demo, I created a large text that moves to the right of the page.

The intended thing I want is for the text to simply clip off at the boundaries of the web page.

Currently, it moves past the "100vw" boundary of the web page and induces x-scrolling.

 

 

Is there a way to prevent this from happening?

See the Pen ExMyxNX by Jay-Zhang-the-sasster (@Jay-Zhang-the-sasster) on CodePen

[Carl]

Thanks for the demo.

 

Try setting 

 

body {
  overflow-x: hidden;
}

 

Or you can put your <p> element in a wrapper div that has the same css.

 

See the Pen qBvNdWd by snorkltv (@snorkltv) on CodePen