在构建 UI 的时候，从头写内容既费时又会分散对布局的注意力。Lorem Ipsum 占位文本可以让你专注于设计和代码，先把空间填满，等真实内容到位再替换。本文介绍 Lorem Ipsum 的来源、使用时机，以及如何按需生成。
Lorem Ipsum 是什么？
Lorem Ipsum 是西塞罗《善恶之极》（De Finibus Bonorum et Malorum，公元前 45 年）中的一段打乱排列的拉丁文摘录，原著是一部伦理学哲学著作。标准文本以这段话开头：
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
字体设计师 Richard McClintock 于 1994 年追溯出了这段文字的来源。自 16 世纪起，这段文本就被用作排版占位文字——最早出现在 Aldus Manutius 的早期印刷机上，1960 年代又随 Letraset 转印字体纸流行开来。时至今日它已成为事实标准，原因在于其字母和词长分布符合真实文本的统计规律，同时又不会因为有实际含义而分散注意力。
为什么用占位文本？
在开发过程中过早使用真实内容会带来几个问题：
认知干扰： 当占位文本是有意义的句子时，评审者会关注文字而不是布局。开发者临时写的”内容”往往包含隐性的编辑判断，浪费评审时间。
范围蔓延： 真实内容产生依赖关系。UI 组件如果需要”真实的市场文案”，就会被内容团队的排期卡住。
分布不均： 真实内容很少均匀分布。占位文本能可预测地填充空间，更容易暴露布局问题。
法律风险： 在内部原型中复制真实文字（竞争对手的文案、公共领域作品、维基百科等）可能带来版权或署名问题。
什么时候不该用 Lorem Ipsum
Lorem Ipsum 适合结构设计阶段，但在以下场景中会成为负担：
- 可用性测试： 受测者处理 Lorem Ipsum 的方式与真实内容完全不同。涉及阅读理解的测试应使用真实或近似真实的内容。
- 内容驱动的布局： 对于内容长度决定结构的布局（数据表格、卡片网格），应使用有代表性的真实数据。
- 无障碍审查： 屏幕阅读器测试应使用真实或近似真实的文本。
- 向决策层汇报： 决策者看到 Lorem Ipsum 可能认为内容尚未完成，进而拒绝审批。
自定义生成 Lorem Ipsum
标准 Lorem Ipsum 段落大约 69 个单词。大多数场景需要更精细的控制：
段落 vs 句子 vs 单词
- 段落： 适合多栏布局、正文区块和卡片描述。标准的 5-7 句段落能模拟真实的文字密度。
- 句子： 适合列表项、表格单元格、提示文案或简短描述。
- 单词： 适合标签、按钮文案、徽章文字和导航项，适用于已知字符预算的场景。
起始文本的变体
标准的 “Lorem ipsum dolor sit amet…” 开头已经成为”这是占位内容”的信号，对团队所有成员来说一目了然——这通常正是你想要的效果。但如果工具或设计系统中的 Lorem Ipsum 会被客户看到，可以考虑从语料库的其他位置开始生成，避免那个过于显眼的开头。
HTML 格式 vs 纯文本
对于 Web 开发，生成带 <p> 标签的 Lorem Ipsum 比纯文本更实用——可以直接粘贴到 HTML 模板或组件预览中：
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>Lorem Ipsum 的替代方案
根据具体场景，其他占位策略可能更合适：
真实感的假数据
对于姓名、地址、邮箱、日期等结构化内容，Lorem Ipsum 无法胜任，需要语义上合理的假数据。Faker.js 等库可以生成上下文合理的占位数据：
import { faker } from '@faker-js/faker';
faker.person.fullName(); // "张三"
faker.internet.email(); // "zhangsan@example.net"
faker.date.recent(); // 2024-03-15T09:23:41.000Z
faker.commerce.productName(); // "人体工学橡胶椅"主题化生成器
当团队对标准 Lorem Ipsum 审美疲劳，或想要更易读的占位文本时，可以考虑主题化生成器：纸杯蛋糕体、嬉皮体、企业黑话体、海盗体等。这些往往更有记忆点，也能让设计评审的氛围轻松一些。
重复的短语
对于标签或标记这类很短的文字，需要预测长度时：
短标签
稍微长一点的标签
最长版本的标签文案这比 Lorem Ipsum 更能如实反映内容结构。
开发者常见使用场景
React 组件开发
const PLACEHOLDER_PARAGRAPHS = [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"Ut enim ad minim veniam, quis nostrud exercitation ullamco.",
"Duis aute irure dolor in reprehenderit in voluptate velit.",
];
function ArticlePreview() {
return (
<article>
<h2>占位标题</h2>
{PLACEHOLDER_PARAGRAPHS.map((p, i) => (
<p key={i}>{p}</p>
))}
</article>
);
}CSS 测试
Lorem Ipsum 非常适合测试依赖文本长度的 CSS 属性：
.card-description {
/* 超过 3 行时是否正确截断？ */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}粘贴一段 50 个单词的 Lorem Ipsum，在接入真实内容之前验证截断行为。
数据库填充
用接近真实文本的内容填充开发数据库：
LOREM_WORDS = "Lorem ipsum dolor sit amet consectetur adipiscing elit".split()
def generate_lorem(words=50):
return " ".join((LOREM_WORDS * (words // len(LOREM_WORDS) + 1))[:words])
posts = [
{"title": f"文章 {i}", "body": generate_lorem(100)}
for i in range(100)
]
db.bulk_insert(posts)标准 Lorem Ipsum 文本参考
大多数生成器使用的完整标准 Lorem Ipsum 文本：
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.共 69 个单词。需要更长的内容时，大多数生成器会循环使用一个更大的去拉丁化拉丁文语料库。
立即生成
需要指定数量的单词、句子或段落？生成器即时处理——无需注册，一键复制。
打开 Lorem Ipsum 生成器 → — 选择词数或段落数，一键复制结果。