Break long URLs so nothing scrolls sideways
One long unbroken string can force an entire page wider than the viewport, and a pasted URL in a comment is the usual culprit. W3C lists C33 as sufficient for 1.4.10 Reflow. Browsers do part of this already, breaking most URLs at an ampersand, a forward slash, a hyphen or a question mark, and W3C says plainly that sometimes those are not enough. A long path segment, a session token or a base64 string offers none of those characters, so it goes off the side. Setting overflow-wrap to break-word on containers that hold text people paste is the CSS answer. W3C's own note offers a better first answer, though, which is not to print the URL at all. A human-readable link is better for usability and for accessibility, and it wraps at the spaces between its words, which a raw token has none of.
How we find it in an audit
We test at 320 CSS pixels with real content rather than tidy sample text, and the strings that matter are the ones with nothing to break at. Long tokens, deep paths, hashes. Scanners flag horizontal overflow and cannot tell you which string caused it, so this is a narrow-and-scroll test.
How affected users experience it
A page with a horizontal scrollbar at high zoom needs two-directional scrolling for every line. That cost is paid on every line of every paragraph, not only on the one holding the URL. One overflowing string breaks the reading experience of the whole page for a reader at 400 percent.
Passes vs. fails
Passes
.comment { width: 100%; overflow-wrap: break-word; }Fails
.comment { width: 100%; }
/* a pasted URL forces the page wider than the viewport */How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Meta viewport allows for zoomA tool can check this
Other ways to satisfy this rule
11 guides on this site are filed under 1.4.10 Reflow. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- C31sufficientReflow content with flexbox at narrow widths
- C32sufficientStack columns with grid and media queries
- C38sufficientLet labels and inputs wrap on narrow screens
- G206sufficientOffer a layout without horizontal scrolling
- G224sufficientPreserve meaningful indentation when text reflows
- G225sufficientKeep horizontal carousels usable at 320 pixels
This guide is our interpretation of W3C technique C33: Allowing for Reflow with Long URLs and Strings of Text. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.