更改div中代码元素的方向

Question

我想要code与direction:ltr，它在与direction:rtl的div。这是我的例子：

div{direction:rtl !important;}
code{direction:ltr; background-color:#eee;padding:2px 5px;}

<div>
    سلام این یک <code>var a = 1;</code> کد است.
<div>

你可以看到分号不是正确的情况。我怎么能修复这个问题css？

Answer 1

您只需要将unicode-bidi: bidi-override添加到code标记中。你可以在这里阅读更多相关信息：https://css-tricks.com/almanac/properties/d/direction/

div {
  direction: rtl !important;
}

code {
  direction: ltr;
  unicode-bidi: bidi-override;
  background-color: #eee;
  padding: 2px 5px;
}

<div>
  سلام این یک <code>var a = 1;</code> کد است.
  <div>

Answer 2

只需将display: inline-block;插入代码选择器即可。

code {
   display: inline-block;
   //other css...
}

div{direction:rtl !important;}
code{direction:ltr; background-color:#eee;padding:2px 5px;display: inline-block;}

<div>
    سلام این یک <code>var a = 1;</code> کد است.
<div>