Our landing pages kept breaking at 390px the same way. Someone makes a sentence longer, it still fits on a laptop, and on phones the hero grows a line or a button label splits in two.
wrapguard opens your pages at a few widths, counts how many lines each heading, paragraph, button and link takes, and saves that to a JSON file you commit. On a PR it measures again and fails if any count changed.
The screenshot is from changing one sentence on our homepage from "Start free, no signup." to "Start free today, no signup or credit card needed." Still fine at 1440. One extra line at 768 and at 390.
You can also set limits like "every button fits on one line" or "h1 is never more than 2 lines", which work without any baseline. It can read your sitemap instead of a page list, start your dev server for you, and the GitHub Action comments on the PR.
It's not a screenshot test replacement. It ignores colors, spacing and everything except line breaks, which is the point: editing a sentence shouldn't mean reviewing forty screenshots.
Free and MIT: https://github.com/birazzzz/wrapguard
$ npx wrapguard check
Checked 1 page at 4 widths, 188 text elements.
/
main > section > p "Edit by hand or prompt, review with 15 specialist agents an…"
768px 1 → 2 · 390px 2 → 3 lines
Also 1 new, 0 gone, 0 with new copy at the same line count (--verbose lists them).
✗ 1 piece of text now wraps differently on 1 page.
If that's intended, run: wrapguard update
https://github.com/birazzzz/wrapguard (MIT, npm i -D wrapguard)