R042: Clipped text: content wider than its box with overflow hidden and no ellipsis

Arabic often runs wider than the English a box was sized for, so overflow: hidden cuts words off; text with an ellipsis is still flagged, at low severity, to review the cut.

The check

Id: R042
Category: Layout
Default severity: high

When it fires

high
A visible element's text is more than 2px wider than its box, the box has overflow: hidden or clip, and there is no ellipsis, so words are cut off mid-word. It is not limited to Arabic text.
Fix: Allow the text to wrap or the box to grow; if truncation is intended, add text-overflow: ellipsis.
low
The same, with text-overflow: ellipsis. The cut is intended, so this is low severity: a prompt to check the visible part still carries the meaning.
Fix: Confirm the visible portion carries the meaning; Arabic often needs more horizontal room than the English it was designed for.

What it leaves alone

Boxes under 8px, like visually hidden labels; text under 4 characters; and the image-replacement pattern, text pushed out on purpose with text-indent: -9999px or font-size: 0 so a background image stands in for it. Up to eight per page. When the clip comes from a fixed pixel width, R043 reports it instead, pointing at the width to change.

Broken, then fixed

before.css

.tab-label {
  overflow: hidden;
  white-space: nowrap;
}

after.css

.tab-label {
  overflow: hidden;
  white-space: normal;
}

Check it by hand

Select the element and run [$0.scrollWidth, $0.clientWidth, getComputedStyle($0).overflowX, getComputedStyle($0).textOverflow] in the DevTools console. A first number above the second with hidden or clip is the finding; ellipsis means the cut was meant.

What the report shows you

Each R042 finding carries the fields below that apply to it, so you can see why it fired without rerunning the scan.

scrollWidth: How wide the text is, in pixels.
clientWidth: How wide the box is, in pixels.
sample: The text, cut to 120 characters.
whiteSpace: The element's white-space; nowrap is the usual reason text cannot wrap to fit.

Components that pass it by construction

These Ritla UI components satisfy R042 by how they are built. Used as documented, they do not bring this defect onto your page.

Does your page trip R042?

Paste a URL. Ritla renders the page on desktop, tablet and mobile, runs every check, and shows the top issues with screenshot evidence.

Scan a page free Browse the checks