Lorem Ipsum 不只是占位符：排版密度、断行测试与设计稿填充指南Lorem Ipsum Is More Than Placeholder: Typographic Density, Line-Break Testing and Mock-Filling Guide

Lorem Ipsum 从哪来，为什么是乱码拉丁文Where Lorem Ipsum comes from

很多人以为 Lorem Ipsum 是设计师随便敲的无意义字符串，其实它的源头是古罗马哲学家西塞罗公元前 45 年写的《De Finibus Bonorum et Malorum》（论善恶之极）。1500 年代，一位不知名的印刷工为了展示字体样张，把这本书里的一段文字打乱重组，形成了现在通行的版本："Lorem ipsum dolor sit amet, consectetur adipiscing elit..."。它之所以被沿用至今，是因为这些字母的分布频率接近真实英文文本，用它排出来的版面密度和真实内容接近，而不是像 "abc abc abc" 那样均匀单调。Many people assume Lorem Ipsum is a meaningless string designers typed at random. In fact it traces back to Roman philosopher Cicero's "De Finibus Bonorum et Malorum" (On the Ends of Good and Evil), written in 45 BC. In the 1500s an unknown printer scrambled a passage from the book to create type specimens, producing the version we know today: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...". It survives because its letter frequency distribution resembles real English text, so layouts filled with it have realistic density — unlike the monotonously even "abc abc abc".

我做前端时见过一个反例：设计师用 "测试测试测试" 填满中文卡片，结果上线后真实标题是 "2026 年度技术峰会邀请函"，字数和字符宽度完全不同，卡片溢出了。中文占位文本的问题更突出——如果用重复的"测试"二字，每个字宽度一致，永远测不出长短混排时的断行效果。所以即使用占位符，也要选字符分布接近真实场景的文本。I once saw the opposite mistake: a designer filled Chinese cards with repeated "测试测试测试", but the real title after launch was "2026 年度技术峰会邀请函" — completely different character count and width, and the card overflowed. Chinese placeholders are especially tricky: repeating the same two characters gives uniform width and never reveals how mixed-length text breaks across lines. Even with placeholders, choose text whose character distribution matches the real scenario.

排版密度：用占位文本测真实阅读体验Typographic density: testing real reading experience

排版密度指的是单位面积里文字的"重量"，由字号、行高、字间距、段间距和字符宽度共同决定。Lorem Ipsum 的价值在于它能在没有真实内容时，让你直观看到一段文字在给定容器里是稀疏还是拥挤。我做博客详情页时，最初行高设为 1.4，用短标题测试觉得没问题，填入 500 字 Lorem Ipsum 后才发现大段正文读起来很压抑，改成 1.75 后阅读体验明显改善。这个问题如果只看短文本永远发现不了。Typographic density is the visual "weight" of text per unit area, determined by font size, line height, letter spacing, paragraph spacing and character width. Lorem Ipsum lets you see, before real content exists, whether text in a container feels sparse or cramped. When I built a blog detail page, line-height 1.4 looked fine with short titles, but filling 500 words of Lorem Ipsum revealed dense, tiring body text — raising it to 1.75 made a noticeable difference. You can never catch this with short text alone.

英文排版里还有一个经典指标：每行理想字符数是 45–75 个（含空格），超过 80 个读者容易串行，少于 30 个则断行太频繁。用 Lorem Ipsum 可快速验证容器宽度是否在这个范围内。中文对应理想行宽是 25–40 个汉字，同样可用占位文本测量。我一般会在设计稿里放短、中、长三段占位文本，分别对应标题、摘要和正文，确保三种密度下都不溢出。In English typography a classic metric is 45–75 characters per line (including spaces); over 80 causes eye-tracking errors, under 30 breaks lines too often. Lorem Ipsum quickly verifies whether a container width falls in that range. For Chinese the ideal is 25–40 Han characters per line, measurable the same way. I usually place short, medium and long placeholder blocks in the mockup — title, excerpt, body — to ensure none overflows or feels cramped at any density.

另外要注意字体回退：设计稿用的是 Inter，用户浏览器可能 fallback 到系统字体，不同字体的字面宽度差异可达 10–15%。用 Lorem Ipsum 填充后切换字体预览，能提前发现回退字体下的排版崩坏。Also watch font fallback: the mockup uses Inter, but a user's browser may fall back to a system font whose glyph widths differ by 10–15%. Filling with Lorem Ipsum and switching fonts reveals layout breakage under fallback fonts before real users do.

断行、溢出与响应式测试Line breaks, overflow and responsive testing

占位文本最实用的场景是测断行和溢出。英文单词长短不一，长单词（如 "internationalization"）在窄容器里可能撑破布局，也可能因为 `overflow-wrap` 没设置而溢出。用 Lorem Ipsum 虽然平均词长适中，但我会故意混入几个超长词和数字串，模拟真实内容里的 URL、技术术语或长数字。中文没有空格断词，但标点的避头尾规则（行首不能出现句号、逗号）会影响断行位置，用真实感的中文占位文本才能测出标点挤压是否合理。The most practical use of placeholder text is testing line breaks and overflow. English words vary in length, and long words like "internationalization" can break narrow layouts or overflow if `overflow-wrap` is unset. Lorem Ipsum has moderate average word length, but I deliberately mix in extra-long words and numeric strings to simulate real URLs, technical terms or long numbers. Chinese has no word spaces, but kinsoku rules (punctuation cannot start a line) affect break positions — only realistic Chinese placeholders reveal whether punctuation compression works.

响应式测试里，我会用占位文本把每个容器填到"最大预期长度"，然后从 320px 到 1920px 逐级拉宽，观察哪些断点出现文字溢出、行高塌陷或按钮被挤变形。一个常见错误是只测"刚好填满"的状态，而真实内容可能比设计稿长 30%——如果容器没有 `min-height` 或弹性布局，长文本会把卡片撑得参差不齐。In responsive testing, I fill every container to its "maximum expected length" with placeholder text, then drag the viewport from 320px to 1920px, watching for overflow, collapsed line-height or deformed buttons at each breakpoint. A common mistake is testing only the "just filled" state, while real content may be 30% longer — without `min-height` or flexible layout, long text makes cards uneven.

还有一个细节：CSS 的 `line-clamp` 做多行截断时，必须用真实长度的占位文本验证截断点是否在预期位置，以及省略号是否和行高对齐。我见过很多设计稿里截断效果完美，上线后因为真实文本多了半个字，省略号跑到了下一行。One more detail: when using CSS `line-clamp` or `-webkit-line-clamp` for multi-line truncation, you must verify with realistically long placeholders that the truncation point is where expected and the ellipsis aligns with line height. I have seen many mockups with perfect truncation break at launch because the real text added half a line and the ellipsis dropped to the next line.

设计稿填充的实用建议Practical mock-filling advice

结合这些年的经验，我总结了几条填充设计稿的原则。第一，不要用同一段占位文本填所有位置——标题用短而有力的，正文用中等长度的，列表项用长短交替的，这样才能暴露不同组件的边界情况。第二，中英文混排的产品要同时准备中英文占位文本，因为两种语言的断行、宽度和标点规则完全不同，只测一种等于没测。第三，占位文本里要包含数字、标点、特殊字符和 Emoji，真实内容里这些才是排版崩坏的高发区。From years of practice, here are my mock-filling principles. First, do not fill every slot with the same placeholder — use short punchy text for titles, medium for body, alternating lengths for list items — so each component's edge cases surface. Second, products with mixed Chinese and English need placeholders in both languages; their line-breaking, width and punctuation rules differ completely, so testing only one is like not testing at all. Third, include numbers, punctuation, special characters and Emoji in placeholders — these are where real layout breaks happen.

第四，不要手动敲 "lorem ipsum"，用工具生成指定字数或段落数的文本，保证每次填充密度一致，方便对比不同方案。第五，最终交付前尽量用真实内容替换占位文本做一次走查——占位文本只能发现结构性问题，真实内容的语义长度可能带来新的溢出。Fourth, do not type "lorem ipsum" manually; use a tool to generate a specified word or paragraph count so every fill has consistent density, making design comparisons fair. Fifth, before final delivery, do a pass with real content replacing placeholders — placeholders catch structural issues, but real content's semantic length and keyword distribution can introduce new overflow.

我做工具站时，每个新组件的设计稿都会先用 Lorem Ipsum 填到极限长度，确认布局鲁棒后再接真实数据。本站的 Lorem Ipsum 工具支持自定义段落数、每段字数、HTML 标签和中文占位文本生成，可快速产出各种长度的填充内容，是设计与前端联调时的小帮手。When I build tool sites, every new component's mockup is first filled to its maximum length with Lorem Ipsum to verify layout robustness before real data is wired in. Our Lorem Ipsum tool supports custom paragraph count, words per paragraph, optional HTML tags, and Chinese placeholder generation — quickly producing fill content in any length and format, a handy helper during design and frontend integration.