Question

我有以下html：

＆＃13;

<div dir="rtl">
    <span>"arabic 1"</span>
    <span>"عربي 2"</span>
    <span>"arabic 3"</span>
    <span>"arabic 4"</span>
</div>

＆＃13;

我所要做的就是让那些spans以从右到左的顺序出现，因为它们主要包含阿拉伯文本，但也可能包含任何其他语言。

我更喜欢CSS解决方案来处理html属性（以获得更大的灵活性）

Answer 1

使用flexbox，您可以将父元素的显示设置为flex，然后添加flex-direction: row-reverse以反转元素的顺序;

＆＃13;

.parent {
    display: flex;
    flex-direction: row-reverse;
}

＆＃13;

<div class="parent">
    <span>"arabic 1"</span>
    <span>"عربي 2"</span>
    <span>"arabic 3"</span>
    <span>"arabic 4"</span>
</div>

＆＃13;

或者，在某些情况下，您也可以将元素浮动到右侧：

＆＃13;

.parent span {
    float: right;
}

＆＃13;

<div class="parent">
    <span>"arabic 1"</span>
    <span>"عربي 2"</span>
    <span>"arabic 3"</span>
    <span>"arabic 4"</span>
</div>

＆＃13;

还值得指出的是，还有一个direction属性。您可以将值设置为rtl ...但该值与您拥有的direction="rtl"属性相同。

＆＃13;

.parent {
  direction: rtl;
}

＆＃13;

<div class="parent">
  <span>"arabic 1"</span>
  <span>"عربي 2"</span>
  <span>"arabic 3"</span>
  <span>"arabic 4"</span>
</div>

＆＃13;

Answer 2

span元素默认为unicode-bidi属性的值normal。实际上，这意味着在双向格式化中将连续的span元素视为一个单元。在示例中，最后两个span元素仅包含拉丁字母，空格，数字和Ascii引号，因此它们将被视为一个字符串"arabic 3" "arabic 4"，因此将从左到右呈现

如果在unicode-bidi: embed元素上设置span，它们将被视为根据direction属性设置的布局方向放置的单位（由HTML {隐式设置]他们父母的{1}}属性。

＆＃13;

dir

＆＃13;

＆＃34;从右到左＆＃34;不同方向跨度的顺序

2 个答案: