text-overflow: puntos suspensivos en Firefox 4? (y FF5)

Question

La propiedad CSS text-overflow:ellipsis; debe ser una de las pocas cosas que Microsoft ha hecho bien para la web.

Todos los otros navegadores ahora lo admiten ... excepto Firefox.

Los desarrolladores de Firefox han sido arguing over it since 2005, pero a pesar de la evidente demanda de la misma, parece que no se han podido implementar realmente (incluso una implementación experimental de -moz- sería suficiente).

Hace unos años, alguien encontró una forma de hack Firefox 3 to make it support an ellipsis. El truco usa la característica -moz-binding para implementarlo usando XUL. Varios sitios ahora usan este hack.

Las malas noticias? Firefox 4 es removing the -moz-binding feature, lo que significa que este truco no funcionará más.

Así que tan pronto como se lance Firefox 4 (más adelante este mes, escuché), volveremos al problema de que no sea compatible con esta característica.

Entonces mi pregunta es: ¿Hay alguna otra forma de evitar esto? (Estoy tratando de no caer de nuevo a una solución Javascript si es posible)

[EDIT]
Un montón de arriba-votos, así que no estoy, obviamente, el único que quiere saber, pero yo' Tengo una respuesta hasta ahora que básicamente dice 'use javascript'. Todavía estoy esperando una solución que no necesite JS o, en el peor de los casos, solo la use como un respaldo donde la función CSS no funciona. Así que voy a publicar una recompensa sobre la pregunta, en el caso de que alguien, en alguna parte, haya encontrado una respuesta.

[EDIT]
Una actualización: Firefox ha entrado en el modo de desarrollo rápido, pero a pesar de que ahora se está liberando FF5, esta característica aún no es compatible. Y ahora que la mayoría de los usuarios se han actualizado de FF3.6, el truco ya no es una solución. Las buenas noticias me dicen que podría ser agregado a Firefox 6, que con el nuevo calendario de lanzamientos debería estar listo en solo unos pocos meses. Si ese es el caso, entonces creo que puedo esperar, pero es una pena que no puedan haberlo resuelto antes.

[EDICIÓN FINAL]
Veo que la característica de puntos suspensivos finalmente se ha agregado al "Canal Aurora" de Firefox (es decir, versión de desarrollo). Esto significa que ahora debe ser lanzado como parte de Firefox 7, que saldrá a finales de 2011. Qué alivio.

Notas de la versión disponible aquí: https://developer.mozilla.org/en-US/Firefox/Releases/7

Answer 1

Spudley, que podría lograr lo mismo escribiendo un pequeño Javascript usando jQuery:

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); 
} 

entiendo que debe haber alguna manera de que todos los navegadores soportan este nativamente (sin JavaScript) pero, eso es lo que tenemos en este punto.

EDITAR Además, puede que sea más ordenada adjuntando una clase css a todos aquellos campo de ancho fijo decir fixWidth y luego hacer algo como lo siguiente:

$(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); 
     } 
    } 
} 

Answer 2

This pure CSS solution está muy cerca, excepto por el hecho de que causa puntos suspensivos después de cada línea.

Answer 3

Debo decir que estoy un poco decepcionado de que el único hack específico del navegador en mi aplicación sea para soportar FF4. La solución de javascript anterior no tiene en cuenta las fuentes de ancho variable. Aquí hay un script más detallado que explica esto. El gran problema con esta solución es que si el elemento que contiene el texto está oculto cuando se ejecuta el código, entonces no se conoce el ancho del cuadro. Esto fue un factor decisivo para mí, así que dejé de trabajar en/probarlo ... pero pensé que lo publicaría aquí en caso de que sea útil para alguien. Asegúrese de probarlo bien ya que mi prueba fue menos que exhaustiva. Tenía la intención de agregar una verificación del navegador para ejecutar solo el código de FF4 y permitir que todos los otros navegadores usen su solución existente.

Esto debería estar disponible para tocar el violín aquí: 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 utiliza)

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); 
    } 
} 

sería llamado como:

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

Answer 4

se han topado con este gremlin durante la semana pasada también.

Dado que la solución aceptada no tiene en cuenta las fuentes de ancho variable y la solución de wwwhack tiene un While Loop, incluiré $ .02.

Pude reducir drásticamente el tiempo de procesamiento de mi problema mediante el uso de multiplicación cruzada. Básicamente, tenemos una fórmula que tiene este aspecto:

La variable x en este caso es lo que tenemos que resolver. Cuando se devuelve como un Entero, le dará la nueva longitud que debería tener el texto que fluye demasiado. Multiplicar el MaxLength en un 80% para dar a las elipsis suficiente espacio para mostrar.

Aquí está un ejemplo HTML completo:

<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> 

entiendo que esto es un JS única solución, pero hasta Mozilla corrige el error, yo no soy lo suficientemente inteligente como para llegar a una solución CSS.

Este ejemplo funciona mejor para mí porque se llama a JS cada vez que se carga una grilla en nuestra aplicación. El ancho de columna de cada cuadrícula varía y no tenemos control sobre qué tipo de computadora nuestros usuarios de Firefox ven nuestra aplicación (que, por supuesto, no debería tener ese control :)).

Answer 5

EDITAR 09/30/2011

FF7 está fuera, this bug se resuelve y funciona!

---

EDITAR 08/29/2011

Este problema se marca como resolved y estará disponible en FF 7; actualmente está programado para lanzar el 27/09/2011.

Marque sus calendarios y prepárese para eliminar todos los hacks que ha puesto en su lugar.

VIEJO

tengo otra respuesta: esperar.

El equipo de desarrollo de FF lo persigue para resolver este problema.

que se han fijado solución provisional para Firefox 6.

Firefox 6 !! ¿Cuándo vendrá eso ?

Persona fácil, imaginaria, con exceso de reactividad. Firefox está en la pista de desarrollo rápido. FF6 se lanzará seis semanas después de Firefox 5. Firefox 5 se lanzará el 21 de junio de 2011.

Eso pone la solución en algún momento a principios de agosto de 2011 ... con suerte.

Puede suscribirse a la lista de correo siguiendo el error del enlace en la pregunta del cartel original.

O puede click here; lo que sea más fácil.