如何在CSS中为特定单词换行？含i18n字符串场景

针对国际化字符串 "Your subscription has ended. We'll have your final invoice available soon."，要把其中的“We'll”强制换到第二行，推荐以下方案：

方案一：通过包裹元素+CSS实现（推荐） #

因为是国际化场景，优先在i18n字符串中给目标单词添加一个自定义类的包裹标签（确保翻译时不破坏语义）：

<p>Your subscription has ended. <span class="force-new-line">We'll</span> have your final invoice available soon.</p>

然后编写CSS让该元素独占一行：

.force-new-line {
  display: block;
}

如果需要适配多语言（比如部分语言不需要强制换行），可以结合语言选择器精准控制：

:lang(en) .force-new-line {
  display: block;
}

/* 其他语言下保持默认行内显示 */
:lang(es) .force-new-line,
:lang(fr) .force-new-line {
  display: inline;
}

方案二：利用换行符+CSS（适合纯文本场景） #

如果无法修改HTML结构，可在i18n字符串中“We'll”前添加换行符\n，然后给容器设置CSS让换行生效：

.invoice-text {
  white-space: pre-line;
}

这种方式依赖翻译系统能正确保留换行符，适配性稍弱。

内容的提问来源于stack exchange，提问作者Bruno Martins