首页/案例/Title Check：长标题排版试验台
案例

Title Check：长标题排版试验台

粘贴标题、缩窄真实卡片，对比换行前后并复制 CSS。给网页设计师和 AI 辅助开发者的小工具。

  • 2 张图片
打开页面查看将在新标签页打开 boloop-works.pages.dev，该页面是独立站点，不属于本站。
Title Check：长标题排版试验台 · 图片 1 / 2
Title Check：长标题排版试验台 · 图片 2 / 2

图片署名：Tink

可以实际操作什么

粘贴自己的标题，调整卡片最大宽度（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).