Title Check — a long-title layout playground

What you can try

Paste your own title. Change the maximum card width (220–480px) and title size (18–48px). Compare the same title before and after wrapping, then toggle min-width: 0 and overflow-wrap: anywhere. Copy the current CSS or the title. English, unbroken identifiers and Chinese examples are included.

The before fixture deliberately sets nowrap; it is not a claim that every flex title breaks. The after card permits normal wrapping. Overflow and actual rendered card width come from the browser, not a character-count estimate.

Build and boundaries

Built with AI + HTML/CSS/JavaScript using a local frontend-design-lab workflow. The prompt below is the actual build brief written for this tool, not a discovered third-party prompt. Screenshots show the running tool; they are not design mockups. Desktop and narrow browser viewports were checked, including 320px and 390px, long tokens, Chinese, empty input, literal HTML-looking text and copying. No physical iPhone/Safari check.

No uploads, stored input, third-party assets or backend. The CSS is a component starting point; adapt selectors/styles to your page. This is not an arbitrary-site scanner or a universal typography fix.

Actual build prompt

Build Title Check, a small static browser-only workbench for web designers and AI-assisted builders. Users paste a long title, set a maximum card width from 220–480px and title size from 18–48px, then compare the same text in two real flex layouts. The before fixture explicitly forces nowrap; the after permits normal wrapping and has toggles for min-width:0 and overflow-wrap:anywhere. Keep a working copy-title button beside each heading. Measure actual overflow and rendered card width. Include English, unbroken-identifier and Chinese examples, editable input, a copyable CSS snippet, an honest clipboard-error fallback and an empty state. Render input as text, not HTML. Use a restrained paper/ink typographic workbench with a rust accent, inspired by Typescale's controls-and-live-specimens relationship, without copying its code or assets. Desktop should show controls beside the comparison; phone should stack them without page overflow. Use semantic accessible HTML, visible keyboard focus, system fonts and no dependencies, uploads, storage, trackers or backend. Build with plain HTML/CSS/JavaScript. Do not claim to scan arbitrary sites or guarantee all typography. Test long text and real narrow viewports before publishing.

Sources

• CSS behavior: MDN, https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap and https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
• Visual reference: Typescale, https://typescale.com/ (controls beside live specimens; no code, fonts or assets copied).