Javascript 中断<；span>；s从左边开始进入下一行（rtl语言）

我有一些跨度。它们构成一个句子：

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

word4
字3
字2
字1

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

然而，当句子中断时，它将以通常的方式中断，这意味着句子的第一个单词现在在下一行

---

如何使跨距在左侧分解，以便第一个跨距先向下移动到下一行？

您可能需要以下内容：

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

字4
字3
字2
字1

使用flex：

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

应该注意的是，上面的css使所有跨距向右对齐。如果要将跨距向左对齐，请将以下语句添加到“.container”css类：

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

将其转换为堆栈片段，其宽度将强制换行，并提供背景以查看容器，这样可以：

.container{
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行反向；
-ms柔性方向：行反向；
弯曲方向：行反向；
-webkit柔性包装：包装；
-ms-flex-wrap:wrap；
柔性包装：包装；
}
.a-块对力翘曲{
最大宽度：10em；
背景色：红色；
}

字1
字2
字3
字4

我也是这么想的，所以在发布之前我试过了，它给出了乔治描述的问题——“word1”在下一行，而不是“word4”。所以我没有发帖。这也是我的第一个想法。这对我来说也不起作用。我相信问题是你在用ltr的术语思考，即使你在说rtl。如果您实际上是在RTL文本编辑器中输入，那么单词的显示顺序就不一样了；它们看起来像

4drow 3drow 2drow 1drow

我不太明白。在我看来，我的文本编辑器设置应该与此无关。还是我错了？当然，实际的单词是从右向左写的，但无论如何都不是用英语写的。然而，此处重要的行为是跨度的行为。每个单词都显示正确。我是说你在看英语，这是一种LTR语言，但试着把它想象成RTL。如果用数组表示，单词的实际顺序将是

{w[0]=“word1”w[1]=“word2”w[2]=“word3”w[3]=“word4”}

，不管是哪种语言，但您正在反转它们，以便

w[0]=“word4”

，而在实际的RTL语言中情况并非如此。哦，这就是您的意思。是的，当然，你是对的！我以为你在谈论单个单词的字母/字符&我的文本编辑器设置。

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