带有rtl方向的pre元素中尾随空格的奇怪行为？答案

【问题标题】：Strange behavior with trailing white-space in pre element with rtl direction?带有rtl方向的pre元素中尾随空格的奇怪行为？
【发布时间】：2015-08-03 21:56:45
【问题描述】：

我正在使用具有从右到左方向和左对齐文本的 pre 元素。

我这样做是因为我需要一长串文本左对齐，在一行上，而且我还需要它在左侧而不是右侧溢出。

我遇到的唯一问题是，由于某种原因，出现在文本字符串末尾的任何空格都会显示在文本的开头，即使我可以在开发窗口中看到空白显然在末尾。

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

我做了一个小提琴来演示这个问题。

https://jsfiddle.net/bkmu5ky5/1/

CSS：

pre {
    text-align: left;
    direction: rtl;
    border: 1px solid black; /* For demonstration purposes only */
}

JavaScript：

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

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

HTML：

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

对于您的异常问题，我看到了两种解决方案：

1) 将每个空格和字符添加到您的字符串中，并添加以下 CSS 样式：

unicode-bidi: bidi-override;

它使rtl 的行为保持一致，而且（惊喜）反转您的内联内容。因此，新内容的前置。

2) 应该满足您的需求的是，随着新文本的输入，输入 html 元素的行为方式。它使文本向左对齐。它也溢出到左边。你拿走边框和闪烁的光标，没有人注意到它与你的常规容器有什么不同。

【讨论】：

哦，是的，输入元素的行为正是我想要的！不知道为什么我没有想到只是简单地操纵输入元素以按照我需要的方式查看和工作。谢谢！
为了达到我想要的效果，即本质上模拟输入元素而不实际使用输入元素进行文本输入，我将输入元素设置为readonly，将显示文本输入value 属性，并设置 screen.scrollLeft 等于 screen.scrollWidth。这似乎是一种迂回的方法，但它完全符合我的需要，只用了 3 行 JavaScript、4 行 CSS 和一些额外的 HTML 属性。