我的目标是创建一个带有隐藏溢出和省略号的元素，除了我希望隐藏左侧的字符并且省略号也位于左侧。这适用于大多数浏览器：
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 傻瓜
IE9 和 Opera 完全混淆了。IE 在右侧截断并使文本与省略号重叠。到目前为止，最有创意的 Opera 会在一段时间内使单个单词上的溢出可见（随着元素变窄，也就是说），然后开始截断最左边的单词，但从右边开始。它也无法渲染省略号，在我做的一个实验中，甚至将一个 ™ 字符一直移动到左侧。真的。所以“foobar foobar foobar™”变成了这样：
™foob foobar
作为附加说明，webkit 浏览器的一个（非常烦人的）潜在选项可能是设置-webkit-rtl-ordering:visual左侧的截断，但实际上也以相反的顺序呈现字符：
...嘘声
因此，通过浏览器或某种晦涩的功能嗅探，理论上可以设置该属性并动态反转元素的文本。
是否有一个简单的跨浏览器解决方法，甚至是一个复杂的、基于 JS 的解决方法？