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

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; */