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

... foobar foob

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

™foob foobar

作为补充说明，webkit浏览器的一个（非常烦人的）潜在选项可能是设置-webkit-rtl-ordering:visual左侧截断但也按字面顺序呈现相反的字符：

... boofraboof

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

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

Answer 1

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

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

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

编辑：为了清楚起见，我看到了你提到的同样的问题。

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

1 个答案: