从左边开始将 <span>s 分成下一行（rtl 语言）

Question

我有一些跨度。他们组成一个句子：

<span dir="rtl"> word4 </span> 
<span dir="rtl"> word3 </span>
<span dir="rtl"> word2 </span>
<span dir="rtl"> word1 </span>

它是用从右到左的语言编写的。所以最后一个跨度包含第一个单词。现在只要一行显示句子就可以正常显示了。

HOWEVER: 当句子中断时，它会按照通常的方式中断，这意味着句子的第一个单词现在在下一行。

如何让我的跨度在左侧分解，以便第一个跨度首先向下移动到下一行？

Answer 1

您可能想要的是以下内容：

<div dir="rtl">
  <span> word4 </span> 
  <span> word3 </span>
  <span> word2 </span>
  <span> word1 </span>
</div>

Answer 2

使用弹性：

<div class="container">
  <span> word1 </span>
  <span> word2 </span>
  <span> word3 </span>
  <span> word4 </span>
</div>

而css风格是这样的：

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    }

需要注意的是上面的css使得所有的Spans都右对齐。如果要将 Spans 向左对齐，请将此语句添加到“.container” css class:

-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;

把它变成一个堆栈片段，宽度会强制换行，背景会看到容器：

.container {
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: row-reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            }
.a-block-to-force-warping{
            max-width: 10em;
            background-color: red;
}

<div class="a-block-to-force-warping">
<div class="container">
    <span> word1 </span>
    <span> word2 </span>
    <span> word3 </span>
    <span> word4 </span>
</div>
</div>

从左边开始将 <span>s 分成下一行（rtl 语言）

Break <span>s into next line starting from the left (rtl language)

html

javascript

css

jquery

right-to-left