使用RTL在左侧使用文本溢出省略号的几个浏览器兼容性问题

Question

我的目标是创建一个隐藏溢出和省略号的元素,除了我希望隐藏LEFT侧的字符,省略号也在左侧.这适用于大多数浏览器:

CSS:

#mydiv {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    direction:rtl;
}

HTML:

<div id="mydiv">foobar foobar foobar</div>

当#mydiv比其内容更窄时,应该出现如下内容:

... obar foobar

但是,根据我的判断(以及对其他任何尝试此操作的人的公平警告,因为我已经direction:rtl在其他几个地方看到了解决方案),正确执行此操作的唯一主要浏览器似乎是Firefox.Safari和谷歌浏览器都会将省略号放在文本的左侧,但无论如何都会在右侧截断,如下所示:

... foobar foob

IE9和Opera彻头彻尾的困惑.IE在右侧截断并使文本与省略号重叠.Opera是迄今为止最具创造性的,它会使溢出在单个单词上显示一段时间(因为元素变得更窄,即),然后从右边开始截断最左边的单词.它也无法渲染省略号,在我做过的一个实验中,甚至将一个™角色一直向左移动.真.所以"foobar foobar foobar™"就变成了:

™foob foobar

另外需要注意的是,webkit浏览器的一个(非常烦人的)潜在选项可能是设置-webkit-rtl-ordering:visual左边的哪个截断但BUT也按字面顺序呈现相反的顺序:

... boofraboof

因此,通过浏览器或某种模糊特征嗅探,理论上可以设置该属性并动态反转元素的文本.

是否存在简单的跨浏览器解决方法,甚至是基于JS的复杂解决方案？

Answer 1

有基于 JS/Jquery 的解决方案来解决您的问题。唯一需要注意的是它们更贵。如果您没有在页面上进行大量更改，那么以下解决方案应该可以正常工作。

点点点： http: //dotdotdot.frebsite.nl/

ThreeDots http://tpgblog.com/2009/12/21/thirddots-the-jquery-ellipsis-plugin/

编辑：澄清一下，我遇到了与您提到的相同的问题。