文本溢出:Firefox 4 中的省略号?(和FF5) [英] text-overflow:ellipsis in Firefox 4? (and FF5)

问题描述

text-overflow:ellipsis; CSS 属性必须是 Microsoft 为网络所做的为数不多的几件事之一.

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

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

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

Firefox 开发人员自 2005 年以来一直在争论对它的需求，他们似乎无法真正让自己实现它(即使是实验性的 -moz- 实现就足够了).

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).

几年前，有人想出了一种方法来hack Firefox 3 使其支持省略号.hack 使用 -moz-binding 特性来使用 XUL 实现它.相当多的网站现在都在使用这个黑客.

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.

坏消息?Firefox 4 正在删除-moz-binding 功能，这意味着此 hack 将不再起作用.

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

因此，一旦 Firefox 4 发布(我听说是本月晚些时候)，我们就会回到无法支持此功能的问题上.

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.

所以我的问题是:有没有其他方法可以解决这个问题?(如果可能的话，我试图避免退回到 Javascript 解决方案)

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)

很多赞成票，所以我显然不是唯一想知道的人，但到目前为止我得到了一个答案，基本上是使用 javascript".我仍然希望有一个解决方案，要么根本不需要 JS，要么在最坏的情况下仅将其用作 CSS 功能不起作用的后备.因此，如果有人在某个地方找到了答案，那么我将悬赏这个问题.

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.

更新:Firefox 已进入快速开发模式，但尽管 FF5 现已发布，但仍不支持此功能.而现在大部分用户已经从FF3.6升级了，hack已经不是办法了.好消息是，它可能被添加到 Firefox 6，根据新的发布时间表，它应该会在几个月后发布.如果是这样的话，我想我可以等一下，但很遗憾他们不能早点整理.

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.

[最终编辑]
看到Firefox的极光频道"(即开发版)终于加入了省略号功能.这意味着它现在应该作为 Firefox 7 的一部分发布，Firefox 7 将于 2011 年底发布.真是一种解脱.

[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.

此处提供发行说明:https://developer.mozilla.org/en-美国/Firefox/Releases/7

推荐答案

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

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

我知道应该有某种方式让所有浏览器都原生支持它(没有 JavaScript)，但是，这就是我们目前所拥有的.

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.

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

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

这篇关于文本溢出:Firefox 4 中的省略号?(和FF5)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！