如何用CSS设置文本块：RTL文本居右、LTR文本居左？

你想要的根据文本开头自动切换方向和对齐的效果，用原生CSS就能实现——虽然没有direction:auto，但可以通过以下属性组合达成需求：

.content {
  unicode-bidi: plaintext;
  text-align: start;
}

属性说明： #

• unicode-bidi: plaintext：容器会自动识别文本中第一个强方向性字符（比如英文、中文属于LTR，阿拉伯语、希伯来语属于RTL），以此确定整个容器的文本方向，完全替代你设想的direction:auto功能。
• text-align: start：文本对齐方式会跟随容器的方向自动调整——LTR模式下左对齐，RTL模式下右对齐，刚好匹配你要求的两种场景。

效果验证： #

• 当文本以LTR字符开头（如Hello world! مرحبا بالعالم），容器自动设为LTR，文本左对齐；
• 当文本以RTL字符开头（如مرحبا بالعالم Hello world!），容器自动设为RTL，文本右对齐。

内容的提问来源于stack exchange，提问作者morteza mortezaie