如何强制一段文字在'方向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>

有关详细信息,请参阅此 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'属性一样糟糕.