Text Spacing Tester

Paste the HTML and CSS of a component and see it twice: as written, and with the WCAG 1.4.12 text-spacing overrides applied (line height 1.5, paragraph spacing 2 em, letter spacing 0.12 em and word spacing 0.16 em). The tester then measures every element and lists text that becomes clipped, cut off with an ellipsis or spills out of a fixed-size box only after the spacing change.

Accessibility Runs in your browser

Test Text Spacing (WCAG 1.4.12)

JavaScript is required. This tool runs in your browser, so please enable JavaScript to use it. The instructions below are still available.

HTML (with inline styles or a <style> block)Paste a component or section. Scripts are removed and nothing is loaded from the internet.

Render width

Outline problem elements in the preview

How to Use the Text Spacing Tester

Paste your HTML with the CSS that styles it.
Set the render width to match the layout you want to test.
Press Check and compare the before and after previews.
Fix each listed element, typically by removing fixed heights or allowing text to wrap, and check again.

About This Tool

Front-end developers and designers checking that fixed heights, truncation and tight buttons survive user style sheets, and accessibility auditors testing WCAG 1.4.12 Text Spacing.

Input: HTML and CSS snippet · Output: Side-by-side preview and clipping report.

Features and Limitations

Features

Applies the exact WCAG 1.4.12 values with !important, like the popular text-spacing bookmarklets.
Detects clipped overflow, ellipsis truncation and text spilling out of fixed-size boxes.
Reports only problems caused by the spacing change; issues already present before are listed separately.
Both previews run in sandboxed frames with no scripts and no network access.

Limitations

Only pasted HTML and CSS are rendered; external stylesheets and web fonts are not loaded, and different fonts change how much text grows.
Overlapping text in absolutely positioned layouts can be missed; always look at the after preview as well.
The test does not check text inside images or canvas.
Results are computed in your browser; nothing you enter is sent to a server.

Example

In the sample, the card with a fixed 120 px height and overflow: hidden loses its last line, and the 90 px tag with an ellipsis cuts off more text, while the plain paragraph simply grows.

Frequently Asked Questions

What does WCAG 1.4.12 require?

No content or functionality may be lost when users set line height to 1.5 × font size, paragraph spacing to 2 ×, letter spacing to 0.12 × and word spacing to 0.16 ×. Your CSS does not have to use these values; it must survive them.

How do I fix clipped text?

Avoid fixed heights on text containers (use min-height), let text wrap instead of using white-space: nowrap, and size buttons with padding rather than fixed line heights.

Is an ellipsis a failure?

Truncation with text-overflow: ellipsis fails if the hidden text is not available another way, for example in a tooltip that is reachable by keyboard or on a details page.

Why test with pasted HTML instead of a live page?

Browsers block other sites from being measured inside this page. Pasting a snippet lets the tester render and measure it safely; for full pages, a text-spacing bookmarklet in your own browser is the alternative.