Word broken in the middle

The check walks the text nodes of the rendered page and, for every node that wrapped onto more than one line, works out the character the line broke at. It does so by bisecting over the boxes of individual characters (Range.getClientRects()), not by guessing from font metrics.

Only then does it decide whether that break is a defect. A defect is a break inside a word. A break at a space, a hyphen, a slash, a full stop or a soft hyphen (­) is ordinary typography and raises nothing.

Three further exceptions, without which the check would report nonsense: hyphenation turned on with hyphens: auto is word division, not a broken word; scripts that wrap between characters (Chinese, Japanese, Korean, Thai, Lao, Khmer, Burmese) wrap that way correctly; and text hidden for screen readers only (.sr-only) is not measured at all.

The thresholds live in config/design.json (wordBreak): how short the remainder of the word may be for the finding to still be raised, and how many findings one page at one width may produce. The finding is a warning and does not count towards the design score.

What the check does not do: it does not judge whether the wrapping looks good; it cannot tell a proper noun from an ordinary word; and it cannot see text rendered into an image or a canvas.

There is no effect on visibility in AI answers. Line breaking happens when the browser renders the page; in the HTML the word is whole, and a language model reads the HTML, not a picture of the page.

The benefit is human readability. A word cut in half has to be reassembled across two lines by the reader, and on a phone, where the column is narrow, that can happen ten times on a single screen.

Almost always one CSS property is behind it. overflow-wrap: anywhere, overflow-wrap: break-word and word-break: break-all solve a different problem (a long URL that would spill out of its box) and they solve it by allowing any word to be cut. Narrow the column later and ordinary prose pays the price. With the default (overflow-wrap: normal) a browser never breaks a word in the middle.

We claim no link to a standard. WCAG has no criterion forbidding a broken word. This is practice, not a requirement.

First find where aggressive breaking is switched on. It is usually one rule inherited across the whole site:

/* This breaks EVERY word that does not fit. */
.card p {
  overflow-wrap: anywhere;
}

Then narrow it to what it was introduced for and leave normal wrapping to prose:

.card p {
  overflow-wrap: normal;
}

/* Only where long URLs and codes actually appear. */
.card .url,
.card code {
  overflow-wrap: anywhere;
}

• A common hidden cause: a flex or grid item that refuses to shrink. Its default min-width: auto will not let it be narrower than its content, so the developer reaches for overflow-wrap: anywhere. The right fix is min-width: 0 on that item.
• If you need hyphenation, do it properly: hyphens: auto plus the correct lang on <html> (without it the browser does not know which dictionary to use). You get a hyphen, not a severed word.
• Manual hyphenation where it matters: ­ inside a word offers the browser one place it may divide and leaves the word whole elsewhere.
• Do not shrink the font. A smaller font moves the problem a few pixels along and makes reading worse for everybody.

Note that in Chinese, Japanese and Korean a break between characters is normal. Expect no findings there, and word-break: break-all is a legitimate choice for those languages.