RTL含数字段落使用word-spacing CSS导致溢出的问题求助

我之前也踩过RTL文本结合数字和word-spacing的排版坑，这个问题本质是浏览器在处理**双向文本（RTL+LTR）**时的间距计算偏差——数字默认是LTR方向，当给整个RTL段落加word-spacing后，浏览器在RTL文本和数字的边界处会错误地额外添加间距，最终导致文本溢出容器。

下面给你几个实用的解决方案：

方案1：用unicode-bidi: isolate隔离数字 #

把段落中的数字单独包裹起来，通过unicode-bidi: isolate让浏览器正确处理数字的LTR方向，避免和RTL文本的间距计算冲突：

.rtl-text {
  direction: rtl;
  word-spacing: 0.2em; /* 你需要的间距值 */
}

.rtl-isolate-number {
  unicode-bidi: isolate;
}

对应的HTML结构：

<p class="rtl-text">این یک متن آزمایشی با عدد <span class="rtl-isolate-number">123</span> است. این متن باید درون کانتینر قرار گیرد بدون اینکه از بیرون بیرون برود.</p>

这个方法的好处是精准控制数字部分的排版，不会影响其他RTL文本的正常间距。

方案2：给整个段落设置unicode-bidi: plaintext #

如果你的段落里有大量零散数字，不想逐个包裹，可以直接给RTL段落添加unicode-bidi: plaintext，让浏览器自动解析每个字符的方向，统一处理间距：

.rtl-text {
  direction: rtl;
  word-spacing: 0.2em;
  unicode-bidi: plaintext;
}

对应的HTML结构不需要额外修改：

<p class="rtl-text">این یک متن آزمایشی با عدد 123 است. این متن باید درون کانتینر قرار گیرد بدون اینکه از بیرون بیرون برود.</p>

这个方案更简洁，适合动态生成或包含大量混合方向内容的场景。

为什么这些方案有效？ #

unicode-bidi属性专门用来控制双向文本的渲染规则：

• isolate会把目标元素的文本和周围文本隔离开，让浏览器独立计算其排版和间距
• plaintext会让浏览器根据每个字符的固有方向（比如数字默认LTR、波斯语默认RTL）自动排版，避免强制统一方向带来的间距错误

这两个属性都能解决RTL段落中word-spacing和LTR数字的冲突，让文本正常显示在容器内。

内容的提问来源于stack exchange，提问作者Mehran Zarei