最后更新:
多语言网站的字数设计 - 翻译导致文本膨胀的应对方法
将网站扩展到多语言时，最容易被忽视的问题是"文本膨胀"。为中文完美设计的 UI，翻译成英语后布局就会崩溃。德语版的按钮文字溢出，阿拉伯语版的从右到左显示导致间距混乱。本文定量分析翻译导致的字数变化，并介绍多语言网站 UI 设计中应采用的具体应对方法。
语言间的文本膨胀率 - 以中文为基准的比较
同样含义的句子，不同语言所需的字数差异很大。中文凭借汉字的表意性，信息密度较高，翻译成其他大多数语言时字数会增加。
| 目标语言 | 膨胀率 (中文比) | 示例：中文 10 字 | 主要原因 |
|---|---|---|---|
| 英语 | 1.5~2.0 倍 | 15~20 字符 | 空格分隔、冠词添加 |
| 德语 | 1.8~2.8 倍 | 18~28 字符 | 复合词长度、格变化 |
| 法语 | 1.6~2.2 倍 | 16~22 字符 | 冠词、介词频繁使用 |
| 西班牙语 | 1.5~2.0 倍 | 15~20 字符 | 动词变位长度 |
| 日语 | 1.0~1.3 倍 | 10~13 字符 | 假名混用、助词 |
| 韩语 | 1.2~1.6 倍 | 12~16 字符 | 音节块、助词、空格 |
| 泰语 | 1.3~1.8 倍 | 13~18 字符 | 无空格连续书写 |
| 阿拉伯语 | 1.2~1.7 倍 | 12~17 字符 | 从右到左书写、连接形式 |
特别需要注意的是德语。德语将复合名词写成一个单词，如 "Geschwindigkeitsbegrenzung" (限速，26 个字符) 这样的超长单词频繁出现。如果按钮和导航的设计没有预留这种膨胀空间，布局必然会崩溃。
按 UI 元素分类的字数设计策略
按钮与 CTA
按钮文字是最容易受膨胀影响的元素。中文的"提交" (2 字) 在英语中是 "Submit" (6 字符)，在德语中是 "Absenden" (8 字符)。
- 使用
min-width+padding而非固定宽度 - 预留中文最短文本 2.5 倍的宽度
- 在 CSS 中定义文本超出一行时的换行处理
- 多语言网站原则上不使用
white-space: nowrap
导航与菜单
头部导航的水平空间有限，膨胀影响尤为显著。
- 导航项预计中文 3~5 字、英语 8~15 字符、德语可达 20 字符以上
- 使用 Flexbox 的
flex-wrap: wrap允许自动换行 - 根据语言调整切换为汉堡菜单的断点
- 对于德语、芬兰语等高膨胀率语言，提前与翻译人员商定缩写方案
表单标签与占位符
表单的标签与占位符受输入框宽度制约，会产生字数限制。
- 标签置于输入框上方 (置于左侧时，膨胀会挤窄输入框)
- 占位符要考虑翻译后溢出输入框的可能，设置
text-overflow: ellipsis - 校验提示信息在翻译后可能膨胀 2~3 倍，需预留显示区域
CSS 多语言文本膨胀对策
下面介绍可在 CSS 层面实现的膨胀对策。
/* 基础：文本换行与溢出防止 */
.multilingual-text {
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
/* 按钮：确保最小宽度并可伸缩 */
.btn-multilingual {
min-width: 120px;
padding: 0.75em 1.5em;
white-space: normal;
text-align: center;
}
/* 导航：膨胀时的换行处理 */
.nav-multilingual {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* 表格单元格：最小宽度与换行 */
.table-multilingual td {
min-width: 80px;
word-break: break-word;
}
/* 语言特定的字号调整 (德语缩小) */
:lang(de) .compact-text {
font-size: 0.9em;
}
/* CJK 语言行高调整 */
:lang(ja), :lang(zh), :lang(ko) {
line-height: 1.8;
}hyphens: auto 对英语和德语特别有效，可在适当位置对长单词进行连字符断行，避免行尾出现大片空白。但中文和日语没有连字符概念，需要用 :lang() 选择器按语言控制应用。
i18n 文件的字数管理
多语言网站的翻译文本通常以 JSON 或 YAML 格式的 i18n 文件管理。为了管理字数膨胀，推荐以下做法。
- 在每个键上注释最大字数：
"submitButton": "提交" // max: 15 chars - 翻译键名包含 UI 元素类型：像
nav.home、btn.submit、label.email这样用前缀分类，翻译人员更容易意识到字数约束 - 在 CI/CD 流水线中集成字数检查：翻译文本超过指定最大字数时构建失败
- 在翻译记忆 (TM) 中注册字数约束：在计算机辅助翻译 (CAT) 工具的翻译记忆中设置最大字数，让翻译人员实时确认限制
像素宽度基准的字数限制
基于字数的限制不够精确，因为实际显示宽度因字体和渲染引擎而异。需要精确控制时，应采用像素宽度基准。
即使同为 10 个字符，显示宽度也会因语言与字体而大不相同。
| 文本 | 字符数 | 显示宽度 (16px, sans-serif) |
|---|---|---|
| 字符计数 (中文) | 4 字 | 约 64px |
| Character Count (英语) | 15 字符 | 约 130px |
| Zeichenzählung (德语) | 14 字符 | 约 125px |
| Подсчёт символов (俄语) | 16 字符 | 约 145px |
中文每个字符的宽度较大 (全角字符)，字数少但显示宽度大。反之英语即使字符数多，由于每个字符较窄，显示宽度的增幅较为平缓。在 SEO 字数方面，Google 搜索结果也是基于像素宽度截断的，需要同样的考虑。
RTL (从右到左) 语言支持
支持阿拉伯语、希伯来语等 RTL 语言时，除了字数问题外还需要布局镜像。
- 正确设置 CSS 的
direction: rtl和unicode-bidi属性 - Flexbox 的
flex-direction会自动跟随direction属性，无需显式反转 - 使用逻辑属性 (
margin-inline-start、padding-inline-end) 指定边距 - 方向性图标 (箭头、前进/后退等) 需要镜像，但 logo 和数字不需要
- RTL 与 LTR 混排的双向文本中，使用
<bdi>标签隔离方向
RTL 支持与字数设计密切相关。阿拉伯语具有连接形 (字符会与前后字符相连而改变字形)，因此即使字符数相同，显示宽度也会随上下文变化。固定宽度的布局在 RTL 语言中尤其容易崩溃，弹性布局设计不可或缺。
元数据的多语言字数管理
不只是 UI 文本，元描述与 OGP 标签等元数据也需要多语言化处理。
| 元数据 | 中文推荐字数 | 英语推荐字数 | 注意事项 |
|---|---|---|---|
| title 标签 | 30~35 字 | 50~60 字符 | 按像素宽度约 600px |
| meta description | 80~120 字 | 150~160 字符 | 移动端显示更短 |
| og:title | 30~40 字 | 40~60 字符 | 因社交平台而异 |
| og:description | 60~80 字 | 100~120 字符 | Facebook 可显示约 300 字符 |
重要的是，各语言版本的元数据不应机械翻译，而要按各语言的字数上限分别优化。中文 title 即使 35 字刚好合适，直译成英语会变成 70 字符，在搜索结果中可能被截断。需要的不是"翻译"，而是"用各语言重新创作"这种意识。
伪区域设置 (Pseudo-Locale) 测试策略
在所有翻译完成之前检测文本膨胀导致的布局问题，可以使用"伪区域设置"。伪区域设置是将原文人工膨胀的测试用语言数据，例如将 "Submit" 转换为 "[Šüƀɱîţ !!!]"，字数膨胀 1.5~2 倍。这样无需等待翻译即可测试布局的耐受性。
伪区域设置的生成规则：
- 将各字符替换为带变音符号的字符 (a → ä、e → ë 等)
- 在文本前后添加括号或标记 ([...] 等)
- 添加填充字符，使文本长度膨胀 1.5~2.0 倍
- 保持原文可读 (便于调试时定位是哪个键)
主流 i18n 库 (react-intl、vue-i18n、next-intl 等) 内置或通过插件支持伪区域设置生成。在 CI/CD 流水线中集成伪区域设置的视觉回归测试，可以在添加翻译时自动检测布局崩溃。
抑制字数膨胀的翻译技巧
下面介绍与翻译人员协作、把文本膨胀压到最小的技巧。
- 积极使用缩写形式："information" → "info"、"configuration" → "config"，UI 文本中允许缩写
- 使用动词命令式："Click here to submit the form" → "Submit"，按钮文字浓缩为一个动词
- 省略冠词：UI 文本中省略 "the"、"a"、"an" 往往依然自然
- 文化适配 (本地化)：不做直译，而是意译为目标语言中自然且简洁的表述
- 与图标并用：把部分文字替换为图标，在减少字数的同时传达含义
总结
多语言网站的字数设计关键在于以翻译后文本膨胀为前提的弹性 UI 设计。以中文为基准，英语膨胀 1.5~2 倍，德语膨胀 1.8~2.8 倍。结合 CSS 逻辑属性、Flexbox 弹性布局、伪区域设置预测试、i18n 文件字数约束，可以实现在任何语言下都美观且功能正常的 UI。翻译文本的字数确认请使用字符计数器。