以从右到左的语言从左到右显示电话号码

Question

我有一个用户联系人详细信息的显示，用户可以在从左到右和从右到左文本之间交替显示。

在阿拉伯语中，文本从右向左显示和阅读，但电话号码，网址和电子邮件地址以阿拉伯语和其他权利从左到右显示和读取。左语言。

我已经能够替换用户联系人详细信息的显示，但是当电话号码中有空格时，电话号码不会从左到右显示。这是我所遇问题的直观显示：

以下是英语中从左到右的显示：

以上是与上述相同的详细信息，但是在阿拉伯语中从右向左显示（电话号码（以浅灰色显示）有空格并且不正确显示）：

以下是相同的细节，用阿拉伯语从右向左显示，但从电话号码中删除了空格（电话号码（用浅灰色）在这里正确显示）：

是否有人知道如何以从右到左的语言从左到右显示带有空格的电话号码？

这是我的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

我只想出来了！

我将unicode-bidi: embed;添加到contact_dir_reverse css类中，如下所示：

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

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

Answer 2

在数字组之间放置一个 （一个non-breaking space）似乎可以在Firefox 39中使用。如下所示：

1234 5678
// and 
1234 567 890
// etc.