文本溢出：省略号在Firefox 4？ （和FF5）
text-overflow:ellipsis; CSS属性必须是Microsoft为Web所做的less数几件事情之一。
所有其他浏览器现在支持它…除了Firefox。
火狐开发者自2005年以来一直在争论，但是尽pipe有明显的需求，但他们似乎并没有真正实现它（即使是一个实验-moz-实现也是足够的）。
几年前，有人想出了一个方法来攻击Firefox 3，使其支持省略号 。 hack使用-moz-binding特性来使用XUL来实现它。 相当多的网站现在正在使用这个黑客。
坏消息？ Firefox 4正在删除-moz-binding特性 ，这意味着这个黑客将不再工作。
所以，一旦Firefox 4发布（本月晚些时候，我听到），我们将回到它不能支持这个function的问题。
所以我的问题是：有没有其他解决方法呢？ （如果可能，我试图避免回到Javascript解决scheme）
[编辑]
大量的表决，所以我显然不是唯一想知道的人，但我到目前为止有一个基本上说'使用JavaScript'的答案。 我仍然希望有一个根本不需要JS的解决scheme，或者最糟糕的情况是只使用它作为CSSfunction不起作用的后备。 所以我要在这个问题上发表一个赏金，在某个地方find答案的机会。
[编辑]
更新：Firefox进入了快速开发模式，但是尽pipeFF5现在正式发布，但这个function仍然不被支持。 而现在大多数用户已经从FF3.6升级，黑客已不再是一个解决scheme。 我听说这个好消息可能会被添加到Firefox 6中，随着新的发布时间表应该只在几个月内。 如果是这样的话，那么我想我可以等待它，但是很遗憾，他们不能早日排好它。
[最终编辑]
我看到省略号function最终被添加到Firefox的“Aurora Channel”（即开发版本）中。 这意味着它现在应该作为Firefox 7的一部分发布，这个版本将在2011年底发布。真是太好了。
发行说明可在这里： https : //developer.mozilla.org/en-US/Firefox/Releases/7
Spudley，你可以通过使用jQuery编写一个小的JavaScript来实现同样的function：
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 += elipsis; $('#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 += elipsis; $(this).val(trimmedText); } } }
编辑09/30/2011
FF7出来了， 这个bug已经解决了，而且工作正常！
编辑08/29/2011
此问题已标记为已解决 ，将在FF 7中提供; 目前将于09/27/2011发布。
标记您的日历，并准备好删除所有这些黑客。
旧
我有另一个答案： 等等 。
FF开发团队正在紧锣密鼓地解决这个问题。
他们已经为Firefox 6设置了初步修复。
Firefox 6 ！ 什么时候会出来？！？
容易在那里，虚构的，过度反应的人。 Firefox是在快速开发的轨道上。 Firefox 6将在Firefox 5发布六周后发布。Firefox 5将于2011年6月21日发布。
所以这个修复会在2011年8月初进行…希望。
你可以在原post的问题链接错误之后注册邮件列表。
或者你可以点击这里 ; 以最简单的为准。
我必须说，我有点失望，我的应用程序中唯一的浏览器特定的黑客将支持FF4。 上面的JavaScript解决scheme不考虑可变宽度的字体。 这是一个更详细的脚本，说明了这一点。 这个解决scheme的一个大问题是，如果包含文本的元素在代码运行时被隐藏，那么该框的宽度是未知的。 这对我来说是一个破产的事情，所以我停止了对它的testing……但是我想我会在这里发布它，以防某些人使用它。 一定要testing它，因为我的testing不够详尽。 我打算添加一个浏览器检查，只运行FF4的代码，让所有其他浏览器使用他们现有的解决scheme。
这应该可以在这里摆弄： 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')); });
过去一周，我也遇到了这个gremlin 。
由于接受的解决scheme没有考虑可变宽度的字体和wwwhack的解决scheme有一个While循环，我会抛出我的$ .02。
我能够通过使用交叉乘法来大幅减less我的问题的处理时间。 基本上，我们有一个看起来像这样的公式：
在这种情况下，variablesx是我们需要解决的。 当以整数forms返回时，它将给出新的长度，即溢出的文本应该是。 我把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 (eg ELEMENT_NODE) var divText = myDiv; //Variable used to obtain the text from the DIV element above //Get the nodeType of 3 (eg 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解决scheme。
这个例子最适合我，因为每当网格加载到我们的应用程序中时，JS都会被调用。 每个网格的列宽有所不同，我们无法控制Firefox用户查看我们的应用程序的types（当然，我们不应该有这种控制:)）。
这个纯粹的CSS解决scheme非常接近，除了会导致每行之后出现省略号。
