Text and typography / white-space
Why code blocks are cut off at the edge of the PDF
white-space: pre preserves formatting and refuses to wrap, which on a page means everything past the margin is lost. pre-wrap preserves the formatting and allows wrapping.
What it is for
Code blocks, addresses and any preformatted content default to pre through the browser stylesheet, which is correct for a scrolling page and destructive on paper.
Support: Works everywhere
Supported everywhere. This is a defaults problem rather than a support problem.
The syntax
Written the way it would appear in a document stylesheet, using white-space as intended.
.document pre,
.document .address {
white-space: pre-wrap;
word-break: break-word;
}
/* Where the wrap point matters, mark it explicitly rather than letting the
layout choose: a zero-width space is a legal break with no visible glyph. */The mistake people make
nowrap inherited from a utility class on an ancestor, which is invisible in the element's own rules and produces the same clipping.
Frequently asked
Does white-space work when generating a PDF?
Works everywhere. Supported everywhere. This is a defaults problem rather than a support problem.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How to embed a custom font in a PDF
@font-face. Works everywhere.
Which font-display value should a PDF use
font-display. Works everywhere.
How to use different fonts for different scripts in a PDF
unicode-range. Works everywhere.
How to align numbers in a PDF table column
font-variant-numeric. Works everywhere.
How to enable hyphenation in a PDF
hyphens. Works everywhere.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.