docs(website): soft wrap code blocks #21644

Use `white-space: pre-wrap` to preserve white space as per `pre`, but to
allow line wrapping if the display runs out of horizontal space.

This prevents lines overflowing their box, and causing horizontal
scrolling across the entire page on small screens.

This `pre-wrap` technique is used by GitHub to format code for mobile.

See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#pre-wrap
This commit is contained in:
Chris DeLuca 2023-01-04 10:15:08 -05:00 committed by GitHub
parent e35b9020b1
commit 1bd6e4469b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -961,7 +961,7 @@ local function gen_css(fname)
pre {
/* Tabs are used in codeblocks only for indentation, not alignment, so we can aggressively shrink them. */
tab-size: 2;
white-space: pre;
white-space: pre-wrap;
line-height: 1.3; /* Important for ascii art. */
overflow: visible;
/* font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; */