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

该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年底发布。真是令人欣慰。

发行说明可在此处获得：https : //developer.mozilla.org/en-US/Firefox/Releases/7

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

编辑2011年9月30日

FF7退出，此错误已解决，它可以正常工作！

编辑2011年8月29日

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

标记您的日历并准备好删除所有已放置的地方。

旧

我还有一个答案： 等等。

FF开发团队正在紧锣密鼓地解决这个问题。

他们为Firefox 6设置了临时修复程序。

Firefox 6！那什么时候出来？！？

容易在那里，虚构，反应过度的人。Firefox处于快速开发轨道。FF6将于Firefox 5发布六周后发布。Firefox5将于2011年6月21日发布。

因此，修复工作有望在2011年8月开始。

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

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

我必须说我有些失望，我的应用程序中唯一针对浏览器的黑客行为将是支持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'));
});

在过去的一周中，我也遇到了这把鬼怪。

由于接受的解决方案不考虑可变宽度的字体，并且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用户查看我们的应用程序的计算机类型（当然，我们不应该使用该控件:)）。

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