Strange behavior with trailing white-space in pre element with rtl direction?

问题

I'm working with a pre element with right-to-left direction and left-aligned text.

I'm doing so because I need a long string of text to be left-aligned, on one line, and I also need it to overflow on the left instead of the right.

The only issue I've run into with this is that for some reason any white-space that appears at the end of the string of text is shown at the beginning of the text, even though I can see in the dev window that the white-space is clearly at the end.

Why is this happening? Is there a way to get this same alignment behavior, but with trailing whitespace appearing on the correct side of the text?

I made a fiddle to demonstrate the issue.

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

If you click the "Add White Space" and then "Add Letter" buttons you can see the behavior I described.

回答1:

You would encounter the same behavior many different characters, like commas and periods, too.

I see two solutions for your unusual problem:

1) to prepend every space and character to your string AND add a CSS styling of:

unicode-bidi: bidi-override;

It makes the rtl behavior consistent, but also (surprise surprise), inverses your inline content. Thus the prepending of the new content.

2) what should satisfy your needs is how, with the inputting of new text, behaves the input html element. It is aligning text to the left. It overflows to the left, too. You take away the borders and the blinking cursor and no one notices it's any different than your regular container.

来源：https://stackoverflow.com/questions/31788315/strange-behavior-with-trailing-white-space-in-pre-element-with-rtl-direction

标签

html

css