html - 如何根据其内部文本(英语/阿拉伯语)设置正确的元素 css 方向(ltr/rtl)？

Question

我想在单击按钮时使阿拉伯语文本从右到左对齐，而英语文本从右对齐。我可以通过为英语和阿拉伯语动态更改每个文本对齐方式来做到这一点，这是一个漫长的过程。

简而言之，任何人都可以给出一个想法。任何建议真的很感激。

Answer 1

您可以使用 css 轻松设置内容方向。

html:

<div class="rtl">اليمين إلى اليسار</div>
<div class="ltr">Left to right</div>

CSS:

.rtl{direction:rtl;text-align:right;}
.ltr{direction:ltr;text-align:left;}

编辑:

要使其在按钮点击时动态发生，请执行以下操作:

javascript & jQuery(我建议在这种情况下使用 jQuery):

// function that returns true if input is arabic, else false
function is_arabic(str) {
    var arabic = /[\u0600-\u06FF]/;
    return arabic.test(str);
}

// on button click
$(function(){
    $('#buttonID').click(function(){ // assuming 'buttonID' is the button id
        $('div').each(function(){ // iterate all DIV elements 
            if (is_arabic($(this).text())
                $(this).addClass('rtl').removeClass('ltr');
            else
                $(this).removeClass('rtl').addClass('ltr');
        });
    });
});

只要确保使用上面提到的 CSS 规则即可。

希望对您有所帮助。