text-overflow：Firefox 4中的省略号？（和FF5）

一尘不染

text-overflow：Firefox 4中的省略号？（和FF5）

css

该text-overflow:ellipsis;CSS属性必须的几件事情，微软公司已经做了正确的网络之一。

除Firefox外，所有其他浏览器现在都支持它。

自2005年以来，Firefox开发人员一直在争论它，但是尽管有明显的需求，但他们似乎并不能真正实现它（即使是实验性的-moz-实现也足够了）。

几年前，有人设法破解Firefox 3使其支持省略号。黑客使用该-moz-binding功能通过XUL实施该功能。现在有很多站点都在使用此hack。

坏消息？Firefox 4 删除了该-moz-binding功能，这意味着该黑客将不再起作用。

因此，一旦Firefox 4发布（我听说本月下旬），我们将回到不支持该功能的问题。

所以我的问题是：还有其他解决方法吗？（我试图尽可能避免使用Javascript解决方案）

[编辑]
很多赞成票，所以我显然不是唯一想知道的人，但是到目前为止，我只有一个答案，基本上是“使用javascript”。我仍然希望找到一种根本不需要JS的解决方案，或者最坏的情况是仅将其用作CSS功能无法使用的后备解决方案。因此，我将悬赏该问题，以免某个人在某个地方找到答案。

[编辑]
更新：Firefox已进入快速开发模式，但尽管现在发布了FF5，仍不支持此功能。现在，大多数用户都已从FF3.6升级，该黑客不再是解决方案。好消息告诉我，它
可能会添加到Firefox 6中，而新版本的发布时间表应该会在短短几个月内发布。如果是这样，那么我想我可以等一下，但是他们不能尽快对它进行分类很可惜。

[最终编辑]
我看到省略号功能最终已添加到Firefox的“ Aurora Channel”（即开发版本）中。这意味着它现在应该作为Firefox
7的一部分发布，该版本将于2011年底发布。真是令人欣慰。

阅读 309

2020-05-16

共1个答案

一尘不染

Spudley，您可以通过使用jQuery编写一个小的JavaScript来实现相同的目的：

var limit = 50;
var ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
   // -4 to include the ellipsis size and also since it is an index
   var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4); 
   trimmedText += ellipsis;
   $('#limitedWidthTextBox').val(trimmedText);
}

我知道所有浏览器都应该以某种方式本机支持此功能（不使用JavaScript），但这就是我们目前所拥有的。

编辑另外，您可以通过将一个css类附加到所有这些固定宽度的字段上来使其更加整洁fixWidth ，然后执行以下操作：

$(document).ready(function() {
   $('.fixWidth').each(function() {
      var limit = 50;
      var ellipsis = "...";
      var text = $(this).val();
      if (text.length > limit) {
         // -4 to include the ellipsis size and also since it is an index
         var trimmedText = text.substring(0, limit - 4); 
         trimmedText += ellipsis;
         $(this).val(trimmedText);
      }
   });
});//EOF

2020-05-16