Question

在我的测试页面中，我有一个条件语句，根据用户语言显示正确的css文件。这很有效。

当用户以从左到右的语言（英语，法语，西班牙语等）查看页面时，激活的css为：

<link rel="stylesheet" href="{{ STATIC_URL }}assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ STATIC_URL }}assets/css/style.css">

当用户以从右向左的语言（阿拉伯语，希伯来语等）查看页面时，激活的CSS为：

<link rel="stylesheet" href="{{ STATIC_URL }}assets/plugins/bootstrap/css/bootstrap-rtl.min.css">
<link rel="stylesheet" href="{{ STATIC_URL }}assets/css/css-rtl/style-rtl.css">

我遇到问题的是一段代码，反过来显示用户输入。例如，当测试页面以从左到右的语言呈现时，我想用从右到左的语言显示一小段代码。

当ltr css用于显示页面时，如何仅在html代码的以下部分调用rtl css页面（以下代码部分之外的其余部分应使用ltr CSS）：

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

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

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

            {{ #if contact_details_linkedin_address }}
                <div class="col-sm-4 col-md-4 col-lg-4 ellipsis" dir="rtl" style="direction: rtl;">
                    <i class="fa fa-linkedin icon_size20 icon_padding"></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" dir="rtl" style="direction: rtl;">
                    <i class="fa fa-facebook icon_size20 icon_padding"></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" dir="rtl" style="direction: rtl;">
                    <i class="fa fa-twitter icon_size20 icon_padding"></i><span class="btu-link">{{ contact_details_twitter_address }}</span>
                </div>
            {{ /if }}
        </div>
    </div>
</div>

Answer 1

其中一个解决方案是创建一个不同的div class =＆＃34; ....＆＃34;对于你想要改变的那些，并给它一个你想要使用的CSS样式的href。

覆盖一段html代码的css以显示rtl＆amp; ltr文本

1 个答案: