如何获取文本溢出: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 中的省略号类型样式 (...) 的相关文章

随机推荐

  • Mongo 在双重嵌套数组内更新

    我有一个 mongo 集合 看起来像这样 db users find pretty id ObjectId 57c3d5b3d364e624b4470dfb fullname tim username tim email email pro
  • 在 Windows 中使用 rinside 和 qt

    我开始在 C 中使用 rinside 和 rcpp 我只想从零开始 所以我的 QT 项目除了创建 RInside 实例之外什么都没有 但我有一个无法解决的问题 我的项目中只有一个对话框 我的项目文件 QT core gui TARGET r
  • 在 Ionic 中创建并显示 pdf

    我在用PDFMAKE创建一个base64编码的pdf 我尝试通过将编码的base64提供给iframe src来用Iframe显示它 它可以在 PC 上运行 但不能在移动设备 android 和 ios 上运行 所以 最后我偶然发现Angu
  • ST4中过滤掉空字符串

    考虑以下示例 lt foo bar separator gt 这给出了结果 foo bar 但是我需要 foo bar 在 ST4 中使用分隔符进行格式化之前 有什么方法可以过滤掉空字符串值吗 在实际代码中 值来自另一个模板 该模板具有
  • Spring 和 Thymeleaf:从 th:each 表将对象发送到控制器

    我正在使用以下方法制作经验数据表th each属性与百里香叶我的目标是在每一行都有一个提交按钮 单击该按钮时 会将一个体验对象发送到我的控制器 该对象与我单击提交按钮的行相对应 我不知道出了什么问题 并且似乎无法在网上找到任何可以帮助解决此
  • 您能否提供一些示例来说明为什么使用正则表达式解析 XML 和 HTML 很困难? [关闭]

    Closed 这个问题需要多问focused 目前不接受答案 我看到人们犯的一个错误over and 再次正在尝试使用正则表达式解析 XML 或 HTML 以下是解析 XML 和 HTML 困难的一些原因 人们希望将文件视为行序列 但这是有
  • 确定论坛中未读的项目

    我正在尝试使用 PHP 和 MySQL 构建一个论坛系统 我想知道的是 如何设置它 以便当用户阅读论坛条目时 它显示为仅针对该用户阅读 无论他们在哪个论坛 直到其他人在其上发帖 目前 对于每个线程 我有一个带有 PostID 的表 并具有发
  • 无法确定元音和辅音

    通过下面的代码 无论输入的第一个字母是什么 它总是被确定为元音 original raw input Please type in a word firstLetter original 0 print firstLetter if fir
  • java / grails中的服务器端网络打印

    我是 java grails 开发人员 致力于重新设计软件系统 要求之一是让服务器端应用程序将数据发送到各种网络打印机以打印文本数据 我在网上搜索了有关java网络打印的信息 但没有找到 我查看了 Java Print Service AP
  • 角度图添加水平线

    我想像这里一样添加水平线 Chart js 绘制水平线到我的 angular chart js 如果我理解正确的话 我需要做的是扩展线型图表 我应该如何以及在哪里执行此操作 编写自己的指令 尝试扩展 Angular config 中的 ch
  • 通过下标获取末尾一位数组元素的地址:C++ 标准是否合法?

    我已经多次看到有人断言以下代码是 C 标准不允许的 int array 5 int array begin array 0 int array end array 5 Is array 5 在这种情况下合法的 C 代码吗 如果可能的话 我希
  • mysql其他表中子项的总价

    我有两个表 一个存储数据子级和父级层次结构以及其他路径和后代 userid parent price 1 null 20 2 1 20 3 1 20 4 2 20 5 2 20 6
  • 如何在不指定URL的情况下打开默认的android浏览器?

    我对此失去了理智 我想打开用户的默认网络浏览器 我可以用这个 startActivity new Intent Intent ACTION VIEW Uri parse http google com 打开浏览器并将用户引导至该 URL 但
  • 使用网格恢复“无效”不会使用 jQuery UI Draggable 返回起始位置

    简而言之 如果您将draggable与网格一起使用并在可拖动项目上设置revert invalid 它们不会返回到您开始拖动它们的完全相同的位置 它们会返回到靠近您开始拖动它们的位置的地方 非常奇怪 这很可能是用户界面中的一个错误 如果是这
  • 长按识别器结束后调用 wkwebviewdecidePolicyForNavigationAction

    我试图覆盖原来的 wkwebview 操作表 首先 我禁用了原始的 wkactionsheetwebView evaluateJavaScript document body style webkitTouchCallout none co
  • 如何在 Python 中对存储在文件中的非常大的列表进行打乱?

    我需要确定性地生成一个包含 0 到 2 32 1 数字的随机列表 这将是一种天真的 并且完全不起作用 的做法 只是为了清楚我想要什么 import random numbers range 2 32 random seed 0 random
  • MYSQL 自连接如何工作?

    我最近问了一个关于自加入的问题 我得到了很好的答案 该查询旨在查找紧随事件 1 1 天的事件 2 的 ID 开始日期和价格 该代码运行良好 但我不明白怎么做 有人可以尽可能彻底地解释查询的不同部分是什么以及它们的作用吗 SELECT eve
  • 如何使用数组的最后一个元素对集合进行排序

    我的问题是 我下面有一个集合 id 被忽略 value 10 r v 1 v 3 value 2 r v 4 v 1 value 100 r v 4 v 1 v 10 value 3 r 我如何按数组 r 的最后一个值对其进行排序 也就是说
  • 重载类中的函数调用运算符

    在我的教授给我的 h 文件中 他写道 double operator double x const 重载的要点是将 x 作为双精度值读入 并使用它来计算存储在类对象 Term 中的多项式 我在课堂实现中想到的是 double operato
  • 如何获取文本溢出:mozilla 中的省略号类型样式 (...)

    我正在尝试在 Mozilla 中获取省略号 我发现了一些 jquery 插件有助于在 Mozilla 中形成省略号 但是当大量数据到来时 它无法处理页面中形成良好的脚本错误 我认为实际上 jquery 逐字处理每个单词 这需要花费大量时间来