Browsers render final comma of right-to-left (rtl) css fields at beginning of field

问题

The HTML

<div style='direction:rtl;'>foo,</div>
<div style='direction:rtl;'>fie, fum</div>

surprisingly renders the results as

,foo
fie, fum

at the right edge of the field.

Why does the comma after foo move to the beginning of the field when using rtl? Why don't alphabetic characters and words do the same?

This happens at rendering time in recent Firefox and in Chrome Version 37.0.2062.94

The incorrectly rendered text cuts and pastes the way it is supposed to be - the comma appears at the end.

What we want is a text display field that right-aligns text nicely and truncates overflow text at the left edge of the field. Think of it as only wanting to see the ends of text strings. We're using it in SlickGrid but this is clearly not a SlickGrid issue.

JSFiddle at http://jsfiddle.net/pandemonica/dj7x7ee1

Our planned ugly workaround is to add

<span style='visibility:hidden;'>i</span>

after each text line to display. Except we will be moving the style to css.

回答1:

You could have the content within a inline element and then play around with unicode-bidi.

HTML

<div><span>fie,</span></div>
<div><span>fie, foo,</span></div>

CSS

div {
    direction: rtl;  
}

div span {
    direction: ltr;
    unicode-bidi: bidi-override;
}

Fiddle: http://jsfiddle.net/dj7x7ee1/1/

Greetings

Axel

来源：https://stackoverflow.com/questions/25734607/browsers-render-final-comma-of-right-to-left-rtl-css-fields-at-beginning-of-fi