- Success Criterion 1.4.12
- Conformance level AA
JavaScript Truncation That Deletes Content on Text-Spacing Change
1.4.12 — Text Spacing
Scenario
Setting
A car-rental site's checkout flow
What’s wrong
JS truncation re-running and deleting content when spacing changes metrics.
Example
function fitDescription() {
var el = document.querySelector('.vehicle-desc');
while (el.scrollHeight > el.clientHeight) {
el.textContent = el.textContent.slice(0, -1);
}
} Why it matters
This script re-runs whenever the layout reflows, so wider line spacing triggers it to keep deleting characters from the description until it fits the old box height.
How to test
Apply the text-spacing override where JS auto-truncation runs (character counters, ellipsis logic): if it deletes content when the spacing metrics change, it fails.
How to fix
Never delete DOM text to force a fit; let content reflow, or use a reversible visual clamp with a full-text disclosure.
.vehicle-desc { max-height: none; overflow: visible; }
<!-- remove the JS truncation entirely; use CSS line-clamp with a "read more" toggle if truncation is genuinely needed --> Outcome
A renter with wider line spacing reads the entire vehicle description instead of a sentence chopped short by a script.
Who is affected
Users who apply custom text spacing can permanently lose parts of the vehicle description, since the script deletes rather than wraps the overflow.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Text That Clips or Overlaps Under User Text-Spacing Settings
- Fixed-Height Container Clipping Text at Wider Line Spacing
- Text Overlapping the Section Below After Spacing Changes
- Author CSS Blocking the User’s Own Text-Spacing Stylesheet
- Button Label That Vanishes Under Increased Text Spacing
- Tooltip or Dropdown That Truncates Under Text-Spacing Overrides