Title Check：長標題排版試驗台

可以實際操作什麼

貼上自己的標題，調整卡片最大寬度（220–480px）與標題字級（18–48px），對比同一標題換行前後的效果，分別切換 min-width: 0 和 overflow-wrap: anywhere，再複製目前 CSS 或標題。提供長英文、連續識別字與中文範例。

左側刻意設定 nowrap，作為失敗對照，不代表所有 Flex 標題都會出錯。右側允許正常換行。溢出量與卡片實際寬度由瀏覽器測量，不以字數猜測。

製作與邊界

透過 AI 與 HTML/CSS/JavaScript 實際製作，使用本機 frontend-design-lab 工作流程。下方是本工具實際使用的製作需求，不是從其他作者找到的提示詞。圖片是執行頁面的真實截圖，不是概念設計圖。已檢查桌面與 320px、390px 窄螢幕，並驗證長字串、中文、空輸入、HTML 樣式文字以純文字顯示及複製。未檢查實體 iPhone 或 Safari。

沒有上傳、輸入持久化、第三方素材或後端。CSS 是元件起點，須依自己的頁面調整選擇器與視覺樣式；不掃描任意網站，也不保證解決所有排版問題。

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).