如何获取文本溢出:mozilla 中的省略号类型样式 (...)

2023-12-14

我正在尝试在 Mozilla 中获取省略号。我发现了一些 jquery 插件有助于在 Mozilla 中形成省略号,但是当大量数据到来时,它无法处理页面中形成良好的脚本错误。

我认为实际上 jquery 逐字处理每个单词,这需要花费大量时间来执行,这是脚本错误的原因。有没有简单的方法可以在 Mozilla 或任何可以处理大数据的 jquery 插件中显示省略号。


[EDIT] 请注意:自从我在这里发布原始答案以来,事情发生了变化。下面详细介绍的 hack 仅适用于 Firefix 版本 3.x。确实如此not在 FF4、5 或 6 中工作。这些版本的 Firefox 中没有针对此问题的已知修复方法。

然而,省略号功能将被包含在 Firefox 7 中,一两个月后就会推出,所以你现在不用等太久,而且有了他们现在添加到 Firefox 中的自动更新功能,大多数用户都可以使用它。应该在新版本发布后立即转移到新版本。

有关此主题的更多信息,请参阅此问题:Firefox 4 中的文本溢出:省略号? (和FF5)

我已经在下面的评论中注意到了这一警告,但由于人们仍然赞成这个答案,他们可能不会阅读评论,所以我正在编辑答案,将其放在此处的顶部。我将原答案保留在下面以供参考。而且它在 FF3.x 中仍然有效,所以有总比没有好。

原答案如下:


Firefox 是目前唯一不支持 CSS 省略号功能的浏览器。

好消息是这是一个解决方法。它不是很出名,但是效果很好。

它通过使用一些自定义 XUL 来工作,然后使用自定义在样式表中引用它-moz-binding风格声明。 (XUL是Mozilla基于XML的用户界面定义语言。整个Firefox UI都是用它编写的)

首先,您需要创建一个包含 XUL 定义的文件。它应该看起来像这样:

<?xml version="1.0" encoding="UTF-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <binding id="ellipsis">
     <content>
        <xul:window>
           <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
        </xul:window>
     </content>
  </binding>
</bindings>

将此文件另存为ellipsis-xbl.xml您的网络服务器上的某个地方。

然后转到您的样式表:

.myellipsiselement {
  word-wrap:normal;
  white-space:nowrap;
  overflow:hidden;
  -moz-binding:url(ellipsis-xbl.xml#ellipsis);
  -o-text-overflow:ellipsis;
  text-overflow:ellipsis;
}

显然,请将绑定的 URL 更改为您将其保存在站点上的位置。

现在,Firefox 支持省略号。耶!

不过,您需要注意一个重要的警告:XUL 与 HTML 不同,HTML 会忽略空格,而 XUL 不会。因为绑定意味着您的 HTML 代码在本例中实际上被视为 XUL,所以您会发现,如果被截断的元素中有任何空格,它将变得可见。

这意味着如果你有这样的 HTML,你将会遇到一些奇怪的显示问题:

<div>
  some text here that needs an ellipsis
</div>

您需要将开始和结束标记移动到与文本相同的行,如下所示:

<div>some text here that needs an ellipsis</div>

但是一旦你做到了这一点,这个技术应该可以完美地工作——至少在 Firefox 开始支持正常的 CSS 省略号之前......到那时任何人都猜不到会发生什么!

我们一直在广泛使用这种技术,但值得称赞的是——我们从这里了解到它:http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何获取文本溢出:mozilla 中的省略号类型样式 (...) 的相关文章