Making code wrap and how to indent footnote for technical documentation project

1

https://codepen.io/jacobrford/pen/JjjbGOB

What is the best way to make the code section start a second line when the width is at 400px?
In my phone, this part:
“Type “help”, “copyright”, “credits” or “license” for more information.” …sticks out the side and makes it so you have to scroll horizontally. Is there a good way to make it wrap to a second line so you don’t have to scroll?

Also, in my footnote, I’ve used a really sloppy method of getting both lines of the text to indent after the “[1]”. I was trying to make it look the way it does on https://docs.python.org/3/tutorial/interpreter.html.
I’m curious if there’s a better way to do this. I couldn’t seem to figure out a better method than what I’ve got after trying for quite a while.

Thanks in advance.

2

Many code examples I see on the web uses horizontal scrollbars to contain code snippets with long lines. In fact the Python documentation does it too:

Screenshot_20191020_161008

Adding overflow-x: auto to the code elements should do it.

You can fix the width issues by removing the min-width and the padding-right properties.