firefox - 文本溢出：Firefox 4 中的省略号？（和FF5）

Question

text-overflow:ellipsis;CSS 属性必须是 Microsoft 为 Web 所做的少数几件事之一。

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

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

几年前，有人想出了一种破解 Firefox 3 以使其支持省略号的方法。hack 使用该-moz-binding功能使用 XUL 来实现它。相当多的网站现在都在使用这个 hack。

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

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

所以我的问题是：还有其他方法吗？（如果可能的话，我会尽量避免使用 Javascript 解决方案）

[编辑]
很多赞成票，所以我显然不是唯一一个想知道的人，但到目前为止我有一个答案，基本上是“使用 javascript”。我仍然希望有一个根本不需要 JS 的解决方案，或者在最坏的情况下仅将其用作 CSS 功能不起作用的备用方案。所以我将在这个问题上发布一个赏金，如果有人在某个地方找到了答案。

[编辑]
更新：Firefox 已进入快速开发模式，但尽管 FF5 现已发布，但仍不支持此功能。而现在大部分用户已经从 FF3.6 升级，hack 不再是一个解决方案。好消息告诉我，它可能会被添加到 Firefox 6 中，随着新的发布时间表，它应该在几个月内就出来了。如果是这样的话，那我想我可以等一下，但很遗憾他们不能早点解决它。

[FINAL EDIT]
我看到省略号功能终于被添加到了火狐的“极光频道”（即开发版）中。这意味着它现在应该作为 Firefox 7 的一部分发布，该版本将在 2011 年底发布。真是松了一口气。

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

Answer 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

Answer 2

编辑 09/30/2011

FF7 出来了，这个错误已经解决了，它可以工作了！

---

编辑 08/29/2011

此问题已标记为已解决，将在 FF 7 中提供；目前定于 2011 年 9 月 27 日发布。

标记您的日历并准备好删除所有您设置的黑客。

老的

我有另一个答案： 等等。

FF 开发团队正在努力解决这个问题。

他们为 Firefox 6 设置了暂定的修复程序。

火狐6！！什么时候出啊？！！

容易出现，想象中的，过度反应的人。Firefox 处于快速开发轨道上。FF6 定于 Firefox 5 后六周发布。Firefox 5 定于 2011 年 6 月 21 日发布。

所以这将在 2011 年 8 月的某个时候修复......希望如此。

您可以在原始发布者问题中的链接中的错误之后注册邮件列表。

或者你可以点击这里；以最简单的为准。

Answer 3

我必须说我有点失望，我的应用程序中唯一特定于浏览器的 hack 将支持 FF4。上面的 javascript 解决方案不考虑可变宽度字体。这是一个更详细的脚本来说明这一点。这个解决方案的一个大问题是，如果在运行代码时隐藏了包含文本的元素，那么框的宽度是未知的。这对我来说是一个交易破坏者，所以我停止了工作/测试它......但我想我会在这里发布它以防它对某人有用。一定要好好测试它，因为我的测试并不详尽。我打算添加一个浏览器检查以仅运行 FF4 的代码并让所有其他浏览器使用他们现有的解决方案。

这应该可以在这里摆弄：http: //jsfiddle.net/kn9Qg/130/

HTML：

<div id="test">hello World</div>

CSS：

#test {
    margin-top: 20px;
    width: 68px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid green;
}

Javascript（使用 jQuery）

function ellipsify($c){
    // <div $c>                 content container (passed)
    //    <div $b>              bounds
    //       <div $o>           outer
    //          <span $i>       inner
    //       </div>
    //       <span $d></span>   dots
    //    </div>
    // </div>

    var $i = $('<span>' + $c.html() + '</span>');
    var $d = $('<span>...</span>');
    var $o = $('<div></div>');
    var $b = $('<div></div>');

    $b.css( {
        'white-space' : "nowrap",
        'display' : "block",
        'overflow': "hidden"
    }).attr('title', $c.html());

    $o.css({
        'overflow' : "hidden",
        'width' : "100%",
        'float' : "left"
    });

    $c.html('').append($b.append( $o.append($i)).append($d));

    function getWidth($w){
        return parseInt( $w.css('width').replace('px', '') );
    }

    if (getWidth($o) < getWidth($i))
    {
        while (getWidth($i) > (getWidth($b) - getWidth($d)) )
        {
             var content = $i.html();
             $i.html(content.substr(0, content.length - 1));
        }

        $o.css('width', (getWidth($b) - getWidth($d)) + 'px');
    }
    else
    {
        var content = $i.html();
        $c.empty().html(content);
    }
}

它会被称为：

$(function(){
    ellipsify($('#test'));
});

Answer 4

在过去的一周里，我也遇到了这个小鬼。

由于公认的解决方案不考虑可变宽度字体，并且 wwwhack 的解决方案有一个 While 循环，我将投入我的 $.02。

通过使用交叉乘法，我能够大大减少我的问题的处理时间。基本上，我们有一个如下所示的公式：

在这种情况下，变量x就是我们需要解决的问题。当作为整数返回时，它将给出溢出文本应该的新长度。我将 MaxLength 乘以 80% 以使椭圆有足够的空间显示。

这是一个完整的 html 示例：

<html>
    <head>
        <!-- CSS setting the width of the DIV elements for the table columns.  Assume that these widths could change.  -->
        <style type="text/css">
            .div1 { overflow: hidden; white-space: nowrap; width: 80px; }
            .div2 { overflow: hidden; white-space: nowrap; width: 150px; }
            .div3 { overflow: hidden; white-space: nowrap; width: 70px; }
        </style>
        <!-- Make a call to Google jQuery to run the javascript below.  
             NOTE:  jQuery is NOT necessary for the ellipses javascript to work; including jQuery to make this example work -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {  
                //Loop through each DIV element
                $('div').each(function(index) {
                    var myDiv = this;  //The original Div element which will have a nodeType of 1 (e.g. ELEMENT_NODE)
                    var divText = myDiv; //Variable used to obtain the text from the DIV element above  

                    //Get the nodeType of 3 (e.g. TEXT_NODE) from the DIV element.  For this example, it will always be the firstChild  
                    divText = divText.firstChild;  

                    //Create another variable to hold the display text  
                    var sDisplayText = divText.nodeValue;  

                    //Determine if the DIV element is longer than it's supposed to be.
                    if (myDiv.scrollWidth > myDiv.offsetWidth) {  
                        //Percentage Factor is just a way of determining how much text should be removed to append the ellipses  
                        //With variable width fonts, there's no magic number, but 80%, should give you enough room
                        var percentageFactor = .8;  

                        //This is where the magic happens.
                        var sliceFactor = ((myDiv.offsetWidth * percentageFactor) * sDisplayText.length) / myDiv.scrollWidth;
                        sliceFactor = parseInt(sliceFactor);  //Get the value as an Integer
                        sDisplayText = sDisplayText.slice(0, sliceFactor) + "..."; //Append the ellipses
                        divText.nodeValue = sDisplayText; //Set the nodeValue of the Display Text
                    }
                });
            });
        </script>
    </head>
    <body>
        <table border="0">
            <tr>    
                <td><div class="div1">Short Value</div></td>    
                <td><div class="div2">The quick brown fox jumps over the lazy dog; lots and lots of times</div></td>    
                <td><div class="div3">Prince</div></td> 
            </tr>
            <tr>    
                <td><div class="div1">Longer Value</div></td>   
                <td><div class="div2">For score and seven year ago</div></td>   
                <td><div class="div3">Brown, James</div></td>   
            </tr>
            <tr>    
                <td><div class="div1">Even Long Td and Div Value</div></td> 
                <td><div class="div2">Once upon a time</div></td>   
                <td><div class="div3">Schwarzenegger, Arnold</div></td> 
            </tr>
        </table>
    </body>
</html>

我知道这是一个仅限 JS 的修复，但在 Mozilla 修复该错误之前，我还不够聪明，无法提出 CSS 解决方案。

这个例子最适合我，因为每次在我们的应用程序中加载网格时都会调用 JS。每个网格的列宽各不相同，我们无法控制 Firefox 用户查看我们的应用程序的计算机类型（当然，我们不应该拥有这种控制 :)）。

Answer 5

这个纯 CSS 解决方案非常接近，除了它会导致省略号出现在每一行之后。