Text and fonts
Long words and URLs overflow the page
A long email address, a hash, a German compound noun or a URL runs off the right edge instead of wrapping.
What is actually happening
The default wrapping rules break lines at spaces and a handful of punctuation marks. A 60-character string with none of those has no legal break point, so it goes past the edge rather than breaking.
Confirming it is this and not something that looks like it
Insert a space in the middle of the offending string temporarily. If it wraps, there was simply nowhere to break.
The fix
Give the text permission to break inside words where it has to, and enable hyphenation for body copy in languages that hyphenate. Use overflow-wrap rather than the older word-break, because it only breaks when there is no alternative.
.document {
/* Only breaks a word when the line has no other option. */
overflow-wrap: break-word;
/* Needs a lang attribute on html to pick the right dictionary. */
hyphens: auto;
}
/* Strings with no linguistic structure: break them anywhere. */
.reference,
.hash,
.document a[href] {
overflow-wrap: anywhere;
hyphens: none;
}If that was not it
These produce the same symptom often enough to be worth ruling out before assuming the fix above did not work.
- hyphens: auto without a lang attribute, which silently does nothing
- word-break: break-all, which breaks every word rather than only the impossible ones
- A table cell, where the wrapping fix has to be on the cell rather than on the table
- white-space: nowrap inherited from a utility class
Frequently asked
Does this happen with every rendering engine?
The behaviour behind it is not specific to one tool. The default wrapping rules break lines at spaces and a handful of punctuation marks. Anything rendering HTML to a paged medium has to make the same decision, so the fix travels with you if you change how the render happens.
Will this show up as an error in my logs?
No, and that is what makes it expensive. A document that renders wrong is still a successful render as far as every log line is concerned. It is found by someone opening the file, which is usually the customer.
Related failures
Problems people arrive at from the same starting point, or mistake for this one.
Custom fonts fall back to a default in the PDF
The font file was not fetched.
Chinese, Japanese or Korean characters show as boxes
The font in use has no glyphs for those characters, and no font on the render machine does either.
Emoji do not render in the PDF
Emoji need a dedicated font, and colour emoji need one in a colour font format.
Arabic or Hebrew text renders backwards or disconnected
Two separate problems.
Text in the PDF cannot be selected or searched
The text is not text.
CSS for paged documents, and what actually works
Which parts of the paged media specification a browser-based render implements.
Everything that goes wrong, by category
The full list, grouped by where in the pipeline it breaks.
Paste your markup and see the rendered document, without signing up.