最后更新: 2026-09-07

多语言网站的字数设计 - 翻译导致文本膨胀的应对方法

将网站扩展到多语言时，最容易被忽视的问题是"文本膨胀"。为中文完美设计的 UI，翻译成英语后布局就会崩溃。德语版的按钮文字溢出，阿拉伯语版的从右到左显示导致间距混乱。本文定量分析翻译导致的字数变化，并介绍多语言网站 UI 设计中应采用的具体应对方法。

语言间的文本膨胀率 - 字符串越短，膨胀越大

同样含义的句子，不同语言所需的字数差异很大。中文凭借汉字的表意性，信息密度较高，属于"紧凑型语言"，翻译成英语或德语时字数通常会增加。这里的关键在于，膨胀率不仅取决于目标语言，还强烈依赖原文字符串本身的长度。W3C 的国际化文章"Text size in translation"指出，原文越短，翻译后的膨胀率往往越高。按钮和标签这类短字符串，恰恰是膨胀幅度最大的部分，设计时必须按此预留空间。

W3C 引用的 IBM 设计指南，按原文字符串的长度，给出了从英语翻译成欧洲语言时的平均膨胀率。

各语言的整体倾向，可以参考 W3C 介绍的实际 UI (Flickr) 的统计。以英语为 1，短 UI 字符串的长度比例如下。

以上两个表格均出自 W3C 的国际化文章"Text size in translation"，且都以英语为起点。中文与日语同属紧凑型语言，因此从中文翻译成欧洲语言时的膨胀，往往比以英语为起点的情形更大，按此预留余量较为安全。

特别需要注意的是德语。德语将复合名词写成一个单词，如 "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 个字符，显示宽度也会因语言与字体而大不相同。

中文每个字符的宽度较大 (全角字符)，字数少但显示宽度大。反之英语即使字符数多，由于每个字符较窄，显示宽度的增幅较为平缓。在 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 即使 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 设计。以中文这样的紧凑型语言为起点时，翻译成欧洲语言需要预留较大的膨胀余量；W3C 与 IBM 的指南也指出，原文字符串越短，膨胀率越高。结合 CSS 逻辑属性、Flexbox 弹性布局、伪区域设置预测试、i18n 文件字数约束，可以实现在任何语言下都美观且功能正常的 UI。翻译文本的字数确认请使用字符计数器。