用从右到左的语言从左到右显示 phone 个数字

Question

我有一个用户联系方式的显示，用户可以在其中交替显示从左到右和从右到左的文本。

在阿拉伯语中，文本是从右到左显示和阅读的，但是 phone 数字、网址和电子邮件地址是从左到右显示和阅读的阿拉伯语和其他从右到左的语言。

我已经能够交替显示用户联系方式的详细信息，但是当 phone 中有 space 时，phone 数字不会从左到右显示] 数字。这是我遇到的问题的直观显示：

以下是英文版从左到右的显示：

这里的详细信息与上面相同，但以阿拉伯语从右到左显示（phone 数字（青柠色）有 space 并且是不正确显示):

此处再次显示相同的详细信息，以阿拉伯语从右到左显示，但从 phone 数字中删除 spaces（phone 数字（在石灰色）在这里正确显示）：

有谁知道如何在从右到左的语言中从左到右显示其中包含 space 的 phone 数字？

这是我的 HTML 代码：

<div class="row contact_reverse">
    {{ #if contact_details_phone }}
        <div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;">
            <i class="fa fa-phone icon_size20 icon_padding_rtl"></i><span class="contact_dir_reverse">{{ contact_details_phone }}</span>
        </div>
    {{ /if }}

    {{ #if contact_details_mobile_phone }}
        <div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;">
            <i class="fa fa-tablet icon_size20 icon_padding_rtl"></i><span class="contact_dir_reverse">{{ contact_details_mobile_phone }}</span>
        </div>
    {{ /if }}

    {{ #if contact_details_email_address }}
        <div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;">
            <i class="fa fa-envelope icon_size20 icon_padding_rtl"></i>{{ contact_details_email_address }}
        </div>
    {{ /if }}

    {{ #if contact_details_linkedin_address }}
        <div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;">
            <i class="fa fa-linkedin icon_size20 icon_padding_rtl"></i><span class="btu-link">{{ contact_details_linkedin_address }}</span>
        </div>
    {{ /if }}

    {{ #if contact_details_facebook_address }}
        <div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;">
            <i class="fa fa-facebook icon_size20 icon_padding_rtl"></i><span class="btu-link">{{ contact_details_facebook_address }}</span>
        </div>
    {{ /if }}

    {{ #if contact_details_twitter_address }}
        <div class="col-sm-4 col-md-4 col-lg-4 ellipsis contact_reverse" dir="rtl" style="direction: rtl;">
            <i class="fa fa-twitter icon_size20 icon_padding_rtl"></i><span class="btu-link">{{ contact_details_twitter_address }}</span>
        </div>
    {{ /if }}
</div>

这是我的 CSS 代码：

.contact_reverse {
    background-color: red;

    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon_size20 {
    font-size: 20px !important;
}

.icon_padding_rtl {
    padding-left: 6px !important;
    background-color: peru;
}

.contact_dir_reverse {
    background-color: lime;
    direction: ltr;
}

Answer 1

在数字组之间放置  （non-breaking space）似乎在 Firefox 39 中有效。像这样：

1234&nbsp;5678
// and 
1234&nbsp;567&nbsp;890
// etc.

Answer 2

我刚刚弄明白了！

我将 unicode-bidi: embed; 添加到 contact_dir_reverse css class，像这样：

.contact_dir_reverse {
    background-color: lime;
    direction: ltr;
    unicode-bidi: embed;
}

我希望这会对某人有所帮助。

Answer 3

对于您知道必须始终从左到右显示的任何文本（phone 数字，URL），将 dir="ltr" 添加到封装 HTML元素。参见 W3C and MDN

<span dir="ltr">{{ contact_details_mobile_phone }}</span>

用从右到左的语言从左到右显示 phone 个数字

Display phone numbers as left-to-right in right-to-left language

html

css

right-to-left

left-to-right