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

Question

我的目标是创建一个带有 overflow hidden 和省略号的元素，除了我希望隐藏左侧的字符并且省略号也位于左侧。这适用于大多数浏览器:

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 和 Google Chrome 都会将省略号放在文本的左侧，但无论如何都会在右侧截断，如下所示:

...foobar foob

IE9 和 Opera 完全混淆了。 IE 在右侧截断并使文本与省略号重叠。 Opera，迄今为止最有创意的，将使溢出在单个单词上可见一段时间(随着元素变窄，也就是说)，然后开始截断最左边的单词，但从右边开始。它也无法渲染省略号，在我做的一个实验中，它甚至将一个 ™ 字符一直移到左边。真的。所以“foobar foobar foobar™”变成了这样:

™foob foobar

作为附加说明，webkit 浏览器的一个(非常烦人的)潜在选项可能是设置 -webkit-rtl-ordering:visual ，它在左侧截断但也按字面意思反向呈现字符顺序:

...boofraboof

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

是否有简单的跨浏览器解决方法，或者甚至是复杂的、基于 JS 的解决方法？

Answer 1

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

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

三点 http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

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