从右到左边缘的情况

Question

使用direction: rtl

时，我有以下边缘情况似乎有问题

我的英文句子如下：

Lorem Ipsum @username 1000个单位

当用希伯来语显示时，它显示为：

לורםאיפסום@ username 1000יחידות

在Stackoverflow中，它以正确的顺序显示，因为网站采用默认的LTR方向设置样式，当更改为RTL时，@username和1000部分混淆，顺序为不正确。

以下是它的外观示例：

p {
  direction: rtl
}

<p>לורם איפסום @username 1000 יחידות</p>

有关如何解决此问题的任何想法？

Answer 1

您可以在span中包装用户名，并为其指定dir属性以及相应的lang属性。

＆＃13;

＆＃13;

<p>לורם איפסום <span dir="ltr" lang="en">@username 1000</span> יחידות</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

1）在'@'字符前添加‎（left-to-right mark）控制字符 - 表示'@'实际上是英文

2）在数字1000之前添加‏（Right-to-left mark）控制字符，表示它是希伯来语句子的一部分。

p {
  direction: rtl
}

<p>לורם איפסום &lrm;@username &rlm;1000 יחידות</p>

注意：不需要额外的标签!!

Codepen