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

【问题标题】：Several browser compatibility problems with text-overflow ellipsis on left-hand side using RTL使用 RTL 的左侧文本溢出省略号的几个浏览器兼容性问题
【发布时间】：2012-08-13 05:51:42
【问题描述】：

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

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 的解决方法？

【问题讨论】：

我已经打开了一个关于这个问题的错误crbug.com/155836。请注意，这个问题似乎只在使用 ltr 语言时发生。 Chrome 可以正确使用 rtl 语言。

标签： cross-browser right-to-left ellipsis css

【解决方案1】：

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

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

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

编辑：为了清楚起见，我看到了与您提到的相同的问题。

【讨论】：