Question

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

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

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

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

我做了一个小提示来证明这个问题。

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

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

Answer 1

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

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

1）将每个空格和字符添加到字符串中并添加CSS样式：

unicode-bidi: bidi-override;

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

2）满足您需求的是，在输入新文本时，如何表现输入html元素。它正在将文本对齐到左侧。它也溢出到左边。你带走了边框和闪烁的光标，没有人注意到它与普通容器有任何不同。

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

1 个答案: