Skip to content

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.

css

.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 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