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

El text-overflow:ellipsis; La propiedad CSS 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 estado discutiendo sobre esto desde 2005, pero a pesar de la demanda obvia de él, parece que no se pueden llevar realmente a la práctica (incluso una implementación experimental -moz- sería suficiente).

Hace unos años, alguien ideó una forma de piratear Firefox 3 para que sea compatible con una elipsis . El truco usa la característica de -moz-binding para implementarlo usando XUL. Varios sitios ahora usan este hack.

¿Las malas noticias? Firefox 4 está eliminando la función -moz-binding , lo que significa que este hack ya no funcionará.

Entonces, tan pronto como se lanza 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 evitar recurrir a una solución de Javascript si es posible)

[EDITAR]
Muchos votos positivos, así que obviamente no soy el único que quiere saber, pero hasta ahora tengo una respuesta 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.

[EDITAR]
Una actualización: Firefox ha entrado en el modo de desarrollo rápido, pero a pesar de que ahora se lanza 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. La buena noticia es que me han dicho que podría agregarse 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.

[EDICION FINAL]
Veo que la característica de puntos suspensivos finalmente se ha agregado al “Canal Aurora” de Firefox (es decir, la 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 disponibles aquí: https://developer.mozilla.org/en-US/Firefox/Releases/7

Spudley, podrías 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 debería haber alguna forma en que todos los navegadores lo admitan de forma nativa (sin JavaScript), pero eso es lo que tenemos en este momento.

EDITAR También, podría hacerlo más ordenado al asociar una clase css a todos esos campos 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); } } } 

EDITAR 30/09/2011

FF7 está fuera, este error está resuelto y funciona!


EDITAR 29/29/2011

Este problema está marcado como resuelto y estará disponible en FF 7; actualmente está progtwigdo para lanzar el 27/09/2011.

Marque sus calendarios y prepárese para eliminar todos los hacks que ha implementado.

ANTIGUO

Tengo otra respuesta: espera .

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

Tienen la solución provisional establecida para Firefox 6.

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

Fácil allí, persona imaginaria, sobre reactiva. 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 registrarse para la lista de correo siguiendo el error del enlace en la pregunta del cartel original.

O puede hacer clic aquí ; lo que sea más fácil.

Debo decir que estoy un poco decepcionado de que el único truco específico del navegador en mi aplicación sea para soportar FF4. La solución de javascript anterior no tiene en cuenta las fonts 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:

 
hello World

CSS:

 #test { margin-top: 20px; width: 68px; overflow: hidden; white-space: nowrap; border: 1px solid green; } 

Javascript (usa jQuery)

 function ellipsify($c){ // 
content container (passed) //
bounds //
outer // inner //
// dots //
//
var $i = $('' + $c.html() + ''); var $d = $('...'); var $o = $('
'); var $b = $('
'); $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); } }

Se llamaría así:

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

Me he topado con este gremlin durante la semana pasada también.

Como la solución aceptada no tiene en cuenta las fonts de ancho variable y la solución de wwwhack tiene un While Loop, lanzaré $ .02.

Pude reducir drásticamente el tiempo de procesamiento de mi problema mediante el uso de la multiplicación cruzada. Básicamente, tenemos una fórmula que se ve así:

enter image description here

La variable x en este caso es lo que necesitamos 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í hay un ejemplo html completo:

          
Short Value
The quick brown fox jumps over the lazy dog; lots and lots of times
Prince
Longer Value
For score and seven year ago
Brown, James
Even Long Td and Div Value
Once upon a time
Schwarzenegger, Arnold

Entiendo que esto es solo una solución de JS, pero hasta que Mozilla solucione el error, no soy lo suficientemente inteligente como para encontrar una solución de 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 para 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íamos tener ese control :)).

Esta solución pura de CSS está muy cerca, excepto por el hecho de que causa puntos suspensivos después de cada línea.