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

问题描述

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

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

Firefox开发人员从2005年开始争论，但是尽管对它有明显的需求，但是他们似乎并没有真正实现它（即使是一个实验 -moz - 实现就够了。）

几年前， a href =http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html =noreferrer>破解Firefox 3，使其支持省略号。 hack使用 -moz-binding 功能使用XUL实现它。相当多的网站现在正在使用此黑客。

坏消息？ Firefox 4是删除 -moz绑定功能，这意味着这个黑客将不再工作。

一旦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 < a>

解决方案

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屋！