html - 以从右到左的语言将电话号码显示为从左到右

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_reversecss 类中，如下所示：

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

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

Answer 2

在 Firefox 39 中，在数字组之间放置一个 （不间断空格）似乎可以正常工作。就像这样：

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

Answer 3

对于您知道必须始终从左到右显示的任何文本（电话号码、URL），请将 添加dir="ltr"到封装的 HTML 元素中。参见W3C和MDN

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