Html 在rtl方向的前置元素中有尾随空白的奇怪行为？

我正在使用一个从右向左方向和左对齐文本的前置元素

我这样做是因为我需要一个长字符串左对齐，在一行上，我还需要它在左边溢出，而不是在右边

我遇到的唯一问题是，出于某种原因，文本字符串末尾出现的任何空白都会显示在文本的开头，尽管我可以在dev窗口中看到空白明显位于末尾

为什么会这样？是否有办法获得相同的对齐行为，但在文本的正确一侧显示尾随空格

我用小提琴来演示这个问题

CSS:

JavaScript:

function addWhiteSpace() {
    document.getElementById("pre").innerHTML += " ";
}

function addLetter() {
    document.getElementById("pre").innerHTML += "a";
}

HTML:

EWAFHIOWEIAFHIOWEIAHEFHIOWEIAHEFHIOFDFSFDFSFDFSFDFSFDFSFSFDFSFSF

---

如果单击“添加空白”，然后单击“添加字母”按钮，您可以看到我描述的行为。

您将遇到相同的行为，许多不同的字符，如逗号和句点

我看到两种解决您不寻常问题的方法：

1） 要在字符串中添加每个空格和字符，并添加CSS样式，请执行以下操作：

unicode-bidi: bidi-override;

它使

rtl

行为一致，但也（令人惊讶地）反转了内联内容。因此，新内容的前置

---

2） 应该满足您的需要的是，在输入新文本的情况下，如何表现输入html元素。它将文本向左对齐。它也向左边溢出。去掉边框和闪烁的光标，没有人注意到它与常规容器有任何不同。

哦，是的，输入元素的行为正是我想要的！不知道为什么我没有想到只是jerry操纵输入元素，以我需要的方式查看和工作。非常感谢。为了实现我想要的，即基本上模拟输入元素而不实际使用输入元素进行文本输入，我将输入元素设置为

只读

，将显示文本输入到

值

属性中，并将

screen.scrollLeft

设置为

screen.scrollWidth

。它看起来像是一个迂回的方法，但它在三行JavaScript、四行CSS和一些额外的HTML属性中完成了我需要它做的事情。

<pre id="pre">ewafhioewiafihewiahfihewahiofdsfdsfdsfewaihofeihwofdsfdsfdsfdsasdfdsfdsf</pre>
<input type="button" onclick="addWhiteSpace();" value="Add White Space" />
<input type="button" onclick="addLetter();" value="Add Letter" />

unicode-bidi: bidi-override;