Text and typography / overflow-wrap
How to wrap long URLs and reference numbers in a PDF
overflow-wrap: break-word allows a break inside a word when the line has no other option; anywhere is more aggressive and also affects how the minimum width is calculated.
What it is for
On screen, an overflowing string produces a scrollbar. On paper it produces content that is gone. There is nowhere for it to go.
Support: Works everywhere
Supported. Prefer it to word-break: break-all, which breaks every word at the line end rather than only the ones that cannot fit.
The syntax
Written the way it would appear in a document stylesheet, using overflow-wrap as intended.
.document {
overflow-wrap: break-word;
}
/* Strings with no linguistic structure. */
.reference,
.hash,
.document a[href] {
overflow-wrap: anywhere;
}
/* Code blocks: wrap, because there is no horizontal scroll on a page. */
.document pre {
white-space: pre-wrap;
word-break: break-word;
}The mistake people make
Setting it on a container when the overflow is inside a table cell. Table layout sizes columns independently, so the rule has to reach the cell.
Frequently asked
Does overflow-wrap work when generating a PDF?
Works everywhere. Supported. Prefer it to word-break: break-all, which breaks every word at the line end rather than only the ones that cannot fit.
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.