Skip to content

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.

css

.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 usefont-display. Works everywhere.How to use different fonts for different scripts in a PDFunicode-range. Works everywhere.How to align numbers in a PDF table columnfont-variant-numeric. Works everywhere.How to enable hyphenation in a PDFhyphens. Works everywhere.Every property, with its support statusThe full reference, grouped by what part of the page it touches.

Paste the CSS and see what the rendered page does with it.

Try it live, no signup Try it in the playground