文本溢出:Firefox 4中的省略号？(和FF5)

Question

该text-overflow:ellipsis;CSS属性必须是的,微软已经适合网页所做的几件事情之一.

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

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

几年前,有人设法破解Firefox 3以支持省略号.黑客使用该-moz-binding功能使用XUL实现它.现在有很多网站正在使用这种黑客攻击.

坏消息？Firefox 4正在删除该-moz-binding功能,这意味着此黑客将无法再使用.

因此,一旦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

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出来了,这个bug已经解决了,它可以工作!

编辑08/29/2011

此问题已标记为已解决,将在FF 7中提供; 目前将于09/27/2011发布.

标记您的日历,并准备删除您已安装的所有黑客.

旧

我有另一个答案: 等等.

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

他们为Firefox 6提供了暂定的修复程序.

火狐6 !! 什么时候会出来？!？

容易,想象,过度反应的人.Firefox处于快速开发阶段.Firefox 6将于发布六周后发布,Firefox 5将于2011年6月21日发布.

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

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

或者你可以点击这里 ; 最简单的.

Answer 3

我必须说我有点失望,我的应用程序中唯一的浏览器特定黑客将支持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修复bug之前,我只是不够聪明才能提出一个CSS解决方案.

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