javascript - 从左边开始将 分成下一行(rtl 语言)

Question

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

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

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

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

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

Answer 1

使用 flex :

<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 类:

-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>