Keep the code within the border?

Question

Look at this code.
https://code.sololearn.com/W1Hb3ZcBX9wb/?ref=app

As you can see, the code for JavaScript escapes the defined border, and I assume CSS would too, if it was long enough. How can I fix this?

EDIT: I'm running this from the SoloLearn app. I'm not sure how this looks from a browser. Just so everyone knows.

Answer 1

You can do:

overflow-x: auto;

so that the div is scrollable if the content overflows. There's probably a way to wrap the contents using:

word-break: break-all;
word-wrap: break-word;

but for some reason, that doesn't work unless I add:

white-space: normal;

Answer 2

white-space: pre-line;

also works, if that's preferable over scrolling.