Safari浏览器中span标签内阿拉伯字母显示截断问题

问题原因 #

阿拉伯语这类从右到左（RTL）的文本依赖字符间的连写规则呈现完整单词。当单个字符被<span>这类inline元素包裹时，Safari无法将该元素内的字符与前后文本视为连续排版流，导致连写中断，字符呈现出“断开”的视觉效果。

解决方案 #

方法1：让span元素不打断文本流

给包裹字符的<span>添加display: contents属性，该属性会让span元素从DOM布局中“消失”，其包含的文本直接融入父元素的文本流，恢复正常连写：

span {
  display: contents;
}

注意：如果需要给该字符添加颜色、字体等样式，此方法可能不适用，因为display: contents会让span的部分样式失效。

方法2：保持文本流的排版上下文

若需保留span的样式，可通过CSS强制span内的字符融入整体RTL文本流：

span {
  unicode-bidi: embed;
  direction: rtl;
}

该属性会让span内的文本继承父元素的RTL排版规则，确保字符连写不受元素拆分影响。

方法3：避免拆分连续文本

如果业务允许，尽量不要将单个RTL字符用inline元素单独包裹。若需对特定字符添加样式，可考虑拆分完整音节或可独立呈现的字符片段，而非单个连写字符，例如：

<h1>مر<span>حباً</span></h1>

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