浏览器在字段开头处呈现从右到左（rtl）css字段的最终逗号 [英] Browsers render final comma of right-to-left (rtl) css fields at beginning of field

问题描述

HTML

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

，

< foo

fie，fum

,foo
fie, fum

在字段的右边缘。

在使用rtl时，foo之后的逗号是否移动到字段的开头？为什么字母字符和字词不一样？

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?

这种情况发生在最近的Firefox和Chrome版本37.0.2062.94中的呈现时间

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.

我们想要的是文本显示字段右对齐文本和截断溢出文本在字段的左边缘。想象它只想看到文本字符串的结尾。我们在SlickGrid中使用它，但这显然不是SlickGrid问题。

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在 http://jsfiddle.net/pandemonica/dj7x7ee1

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

我们计划的丑陋解决方法是添加

Our planned ugly workaround is to add

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

。除非我们将样式移动到css。

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

推荐答案

你可以在一个内联元素中的内容，然后使用unicode -bidi。

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;
}

小提琴： http://jsfiddle.net/dj7x7ee1/1/

问候

Axel

这篇关于浏览器在字段开头处呈现从右到左（rtl）css字段的最终逗号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！