使用CSS的bidi-override和rtl方向时如何修正换行顺序？

我用一个小脚本，靠unicode-bidi: bidi-override和direction: rtl反转文本的特性来隐藏邮箱地址。

核心HTML结构如下：

<span>
    <span>moc.e</span>
    <span>ussi-</span>
    <span>kaerb</span>
    <span>-enil</span>
    <span>@sser</span>
    <span>dda-l</span>
    <span>iam-t</span>
    <span>set</span>
</span>

正常情况下会输出正确的邮箱：

test-mail-address@line-break-issue.com

但当邮箱过长且容器宽度较窄时，出现了换行顺序错误的问题：

错误的换行结果是：

-break-issue.com
test-mail-address@line

完整的代码示例如下：

CSS代码 #

div {
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 10px;
  vertical-align: top;
  font-size: small;
}

.small {
  border: 1px solid red;
  width: 170px;
}

.big {
  border: 1px solid green;
  width: 280px;
}

strong {
  display: block;
  margin-bottom: 30px;
}

span.eeb-rtl {
  unicode-bidi: bidi-override !important;
  direction: rtl !important;
  display: inline !important;
}

span.eeb-rtl span.eeb-sd {
  display: inline !important;
  padding-left: 0 !important;
}

HTML代码 #

<div class="small">
  <strong>Small container</strong>
  <span class="eeb eeb-rtl">
    <span class="eeb-sd">moc.e</span><span class="eeb-sd">ussi-</span><span class="eeb-sd">kaerb</span><span class="eeb-sd">-enil</span><span class="eeb-sd">@sser</span><span class="eeb-sd">dda-l</span><span class="eeb-sd">iam-t</span><span class="eeb-sd">set</span>
  </span>
</div>
<div class="big">
  <strong>Big container</strong>
  <span class="eeb eeb-rtl">
    <span class="eeb-sd">moc.e</span><span class="eeb-sd">ussi-</span><span class="eeb-sd">kaerb</span><span class="eeb-sd">-enil</span><span class="eeb-sd">@sser</span><span class="eeb-sd">dda-l</span><span class="eeb-sd">iam-t</span><span class="eeb-sd">set</span>
  </span>
</div>

希望找到CSS方案修正窄容器中的换行顺序，让结果变成：

test-mail-address@line-
break-issue.com

可以通过调整CSS的文本方向和换行规则来修正这个问题，核心思路是让RTL文本的换行逻辑匹配视觉上的LTR阅读顺序：

• 修改外层.eeb-rtl容器的显示方式和换行属性，确保容器尊重宽度限制并正确处理换行：

  span.eeb-rtl {
    unicode-bidi: bidi-override;
    direction: rtl;
    display: inline-block; /* 替换inline，让容器适配宽度 */
    white-space: pre-wrap; /* 允许自动换行并保留格式 */
  }
  

• 给每个子文本片段设置LTR方向，确保内部字符顺序正确，同时让浏览器按视觉顺序拆分换行：

  span.eeb-rtl span.eeb-sd {
    direction: ltr;
    unicode-bidi: bidi-override;
    display: inline;
    padding-left: 0;
  }
  

修改后，窄容器中的邮箱会按照预期换行，得到目标结果：

test-mail-address@line-
break-issue.com

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