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

时间：2011-02-07 22:12:38

标签： css firefox ellipsis css3

text-overflow:ellipsis; CSS属性必须是Microsoft为网络做的少数事情之一。

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

Firefox开发人员已经arguing over it since 2005但是尽管有明显的需求，他们似乎无法真正实现它（即使实验-moz-实现也足够了。）

几年前，有人找到了hack Firefox 3 to make it support an ellipsis的方法。黑客使用-moz-binding功能使用XUL实现它。现在有很多网站正在使用这种黑客攻击。

坏消息？ Firefox 4是removing the -moz-binding feature，这意味着这个黑客将不再起作用。

因此，只要Firefox 4发布（本月晚些时候，我听到），我们就会回到让它无法支持此功能的问题。

所以我的问题是：还有其他方法吗？ （如果可能的话，我试图避免回到Javascript解决方案）

[编辑]
很多投票，所以我显然不是唯一一个想知道的人，但到目前为止我有一个答案基本上都是'使用javascript'。我仍然希望找到一个根本不需要JS的解决方案，或者最糟糕的是只将它用作CSS功能不起作用的后备。因此，我将在这个问题上发布一笔赏金，关于某人某某人找到答案的可能性。

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

[最终编辑]
我看到省略号功能最终被添加到Firefox的“Aurora频道”（即开发版）。这意味着它现在应该作为Firefox 7的一部分发布，它将于2011年底发布。真是令人宽慰。

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

5 个答案:

答案 0 :(得分：27)

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

答案 1 :(得分：21)

编辑09/30/2011

FF7已经结束，this bug已解决且有效！

编辑08/29/2011

此问题标记为resolved，将在FF 7中提供;目前将于09/27/2011发布。

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

<强> OLD

我有另一个答案：等待。

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

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

  

Firefox 6 !!什么时候会来   出来？！？

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

因此，在2011年8月初的某个时间进行修复......希望如此。

您可以根据原始海报问题中链接的错误注册邮件列表。

或者你可以click here;最简单的。

答案 2 :(得分：6)

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

答案 3 :(得分：6)

过去一周我也遇到了这个gremlin。

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

通过使用交叉乘法，我能够大大减少问题的处理时间。基本上，我们有一个看起来像这样的公式：

enter image description here

在这种情况下，变量 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修复了这个bug之前，我只是不够聪明才能提出一个CSS解决方案。

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

答案 4 :(得分：3)

This pure CSS solution非常接近，除了它导致省略号出现在每一行之后。

相关问题
最新问题