Question

我想更改另一个标签内的标签的方向，但无法正常工作。

在以下示例中，我希望完全按照我的写作方式来查看aslami @，但是结果显示@之前的a而不是i之后的内容。

<p style="width: 100%; direction: rtl; text-align: right;">
  مهدی
  <em style="direction: ltr; text-align: left;">aslami @</em>
  خاوری
</p>

Answer 1

您需要添加unicode-bidi:isolate; ^ref

<p style="width: 100%; direction: rtl; text-align: right;">
  مهدی
  <em style="direction: ltr;unicode-bidi:isolate; text-align: left;">aslami @</em>
  خاوری
</p>

但是正如规范中所述，与dir相比，您最好使用direction

由于HTML UA可以关闭CSS样式，因此我们建议HTML作者使用HTML dir属性和<bdo>元素，以确保在没有样式表的情况下正确的双向布局。 作者不应在HTML文档中使用方向。

您还应该注意，dir和direction之间存在细微差别。

关于方向，我们有：

ltr

此值将行内基本方向（ bidi方向性）设置为从左到右。 ^ref

对于dir，我们有：

ltr关键字，它映射到ltr状态

表示元素的内容是明确定向隔离从左到右的文本。 ^ref

因此，使用dir=ltr等效于direction: ltr;unicode-bidi:isolate;，而不仅仅是direction: ltr;

^{请参阅@Ori Drori}

的答案

您还可以考虑使用bdi标记来执行相同操作：

<p style="width: 100%; direction: rtl; text-align: right;">
  مهدی
  <bdi><em style="direction: ltr; text-align: left;">aslami @</em></bdi>
  خاوری
</p>

bdi元素表示文本范围，该范围与周围环境隔离，用于双向文本格式^ref

Answer 2

css direction property主要用于设置布局方向（请参阅链接中的第一个示例）。使用html dir attribute设置文本方向：

<p dir="rtl" style="direction: rtl;">
  مهدی
  <em dir="ltr">aslami @</em>
  خاوری
</p>

Answer 3

要缩短代码，您可以仅在HTML标记上单独使用dir属性。这样的事情。 `

<p dir="rtl" style="width: 100%; text-align: right;">
مهدی<em dir="ltr">aslami @</em>خاوری
</p>

`

在p标签html内更改方向

3 个答案: