Saturday, October 8, 2016

Embedding a scrollable piece of plain text

I frequently need to paste code onto this blog that contains lines long enough that they might extend beyond the width of their container. By default, such lines would wrap, which would look strange for code. Therefore, I've taken to enclosing code in elements that have a horizontal scrollbar, as I did in a recent post.

This can be accomplished with a single element: <pre> for the code formatting, with the style element set to get the horizontal scrollbar:

<pre style="width:100%;overflow-x:scroll">Code here
More lines of code, no BR needed</pre>

The only disadvantage with this simple approach is that the scrollbar will always appear even if the text fits perfectly fine.

No comments:

Post a Comment