I’m including some code in a blog post and the length of some lines causes text to wrap, which I don’t want.

I’d like to have the sort of thing which can be found here on stackexchange, where a scroll bar is added for long code to prevent line breaks.

tttttttttttttthhhhhhhhhhhhhiiiiiiiissssssssssssssssss iiiiiiiiiiiiiiiiiissssssssssssssssss vvvvvveeeeeeeerrrrrrrryyyyyyyyy llllllllooooooonnnnnnnnnnnnnggggggggggg

After some research I’ve tried adding this custom CSS class:

.scroll {
  white-space: pre;
  overflow-x: scroll;
}

But this has had no effect on the code block. What should I do?