text-overflow：ellipsis在Firefox 4？ （和FF5） [英] text-overflow:ellipsis in Firefox 4? (and FF5)

问题描述

text-overflow：ellipsis; CSS属性必须是微软为网络完成的几件事之一。

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

Firefox开发人员从2005年以来，它的价值观，但尽管有明显的需求，他们似乎不能真正带来自己实现它（即使一个实验 -moz - 实现就足够了。）

几年前，有人制定了一种方法来破解Firefox 3，使其支持省略号。 hack使用 -moz-binding 功能使用XUL实现它。相当多的网站现在正在使用此黑客。

坏消息？ Firefox 4是删除 -moz-binding 功能

因此，一旦Firefox 4发布（本月晚些时候，我听说），我们将会回到它无法支持这个功能的问题。

所以我的问题是：有什么其他方法吗？ （我尽量避免回退到Javascript解决方案，如果可能的话）

很多的投票，所以我显然不是唯一一个想知道，但我有一个答案到目前为止，基本上说使用javascript。我仍然希望一个解决方案，或者不需要JS，或者在最坏的情况下，只使用它作为一个后退，其中CSS功能不工作。所以我要对这个问题发表一个奖励，有人在某个地方找到了答案。

更新：Firefox已经进入快速开发模式，但尽管FF5现在被释放，但仍然不支持此功能。现在大多数用户已经从FF3.6升级，黑客不再是一个解决方案。好消息告诉我，可以添加到Firefox 6，这与新的发布计划应该在几个月内出来。

[FINAL EDIT]
如果是这样，那么我想我可以等一下，
我看到省略号功能最终添加到了Firefox的Aurora Channel（即开发版本）。这意味着它现在应该作为Firefox 7的一部分发布，这是到2011年年底到期。多么令人放心。

发布说明在这里： https://developer.mozilla.org/en-US/Firefox/Releases/7

解决方案

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

  var limit = 50; 
 var ellipsis =...; 
 if（$（'＃limitedWidthTextBox'）。val（）。length> limit）{
 // -4包括省略号大小，也是因为它是一个索引
 var trimmedText = $（'＃limitedWidthTextBox'）。val（）。substring（0，limit  -  4）; 
 trimmedText + = elipsis; 
 $（'＃limitedWidthTextBox'）。val（trimmedText）; 
} 
  

我理解应该有一种方法，所有的浏览器都支持本机

此外，您可以通过附加一个 css 类所有那些固定宽度字段说 fixWidth
然后做类似如下： p>

  $（document）.ready（function（）{
 $（'。fixWidth' {
 var limit = 50; 
 var ellipsis =...; 
 var text = $（this）.val（）; 
 if（text.length&限制）{
 // -4包括省略号大小，因为它是一个索引
 var trimmedText = text.substring（0，limit  -  4）; 
 trimmedText + = elipsis; 
 $（this）.val（trimmedText）; 
} 
} 
} 
  

The text-overflow:ellipsis; CSS property must be one of the few things that Microsoft has done right for the web.

All the other browsers now support it... except Firefox.

The Firefox developers have been arguing over it since 2005 but despite the obvious demand for it, they can't seem to actually bring themselves to implement it (even an experimental -moz- implementation would be sufficient).

A few years ago, someone worked out a way to hack Firefox 3 to make it support an ellipsis. The hack uses the -moz-binding feature to implement it using XUL. Quite a number of sites are now using this hack.

The bad news? Firefox 4 is removing the -moz-binding feature, which means this hack won't work any more.

So as soon as Firefox 4 is released (later this month, I hear), we're going to be back to the problem of having it not being able to support this feature.

So my question is: Is there any other way around this? (I'm trying to avoid falling back to a Javascript solution if at all possible)

[EDIT]
Lots of up-votes, so I'm obviously not the only one who wants to know, but I've got one answer so far which basically says 'use javascript'. I'm still hoping for a solution that will either not need JS at all, or at worst only use it as a fall-back where the CSS feature doesn't work. So I'm going to post a bounty on the question, on the off chance that someone, somewhere has found an answer.

[EDIT]
An update: Firefox has gone into rapid development mode, but despite FF5 now being released this feature still isn't supported. And now that the majority of users have upgraded from FF3.6, the hack is no longer a solution. The good news I'm told that it might be added to Firefox 6, which with the new release schedule should be out in only a few months. If that's the case, then I guess I can wait it out, but it's a shame they couldn't have sorted it sooner.

[FINAL EDIT]
I see that the ellipsis feature has finally been added to Firefox's "Aurora Channel" (ie development version). This means that it should now be released as part of Firefox 7, which is due out toward the end of 2011. What a relief.

Release notes available here: https://developer.mozilla.org/en-US/Firefox/Releases/7

解决方案

Spudley, you could achieve the same thing by writing a small JavaScript using jQuery:

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 += elipsis;
   $('#limitedWidthTextBox').val(trimmedText);
}

I understand that there should be some way that all browsers support this natively (without JavaScript) but, that's what we have at this point.

EDIT Also, you could make it more neat by attaching a css class to all those fixed width field say fixWidth and then do something like the following:

$(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 += elipsis;
         $(this).val(trimmedText);
      }
   }
}

这篇关于text-overflow：ellipsis在Firefox 4？ （和FF5）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！