如何强制一段文字在'方向rtl'段落内成为'方向ltr'

Question

因此，电话号码始终是ltr（从左到右）。

在多语种网站上工作我需要在一个带有方向rtl的文本段落中插入一个电话号码（带有“+”前缀和数字用' - '分隔）（当然是针对相关语言）

所以我有这样的事情：

.ltr #test {direction:ltr}
.rtl #test {direction:rtl}
#phone {direction:ltr}

<div class="ltr"><p id="test">Please call to <span id="phone">+44-123-321</span> for some help.</p></div>
<div class="rtl"><p id="test">Please call to <span id="phone">+44-123-321</span> for some help.</p></div>

当然这不起作用，因为“direction”仅适用于块元素，“span”是内联元素。我需要将电话号码放在段落中，因此我无法将“span”更改为“display:inline”

我很清楚？

如何让它发挥作用？

Answer 1

尝试添加#phone {direction:ltr; display:inline-block}

Answer 2

您可以在+符号前面使用unicode方向性标记字符，为算法提供所需的提示。

这些是：

LTR: 0x200E
RTL: 0x200F

所以：

<p id="text">Please call to <span id="phone">&#x200F;+44-123-321</span> for some help</p>

有关详情，请参阅this SO回答。

Answer 3

另一种选择可能是在您的内联元素中使用dir='ltr'属性：

<p id="text">Please call to <span dir='ltr'>+44-123-321</span> for some help</p>

请注意，HTML中包含‎与使用dir='ltr'属性一样糟糕。