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

textoverflow css

Question

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

Answer 1

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

Se llamaría así:

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

Answer 2

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

Como la solución aceptada no tiene en cuenta las fuentes 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í:

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:

<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 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 :)).

Answer 3

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

Answer 4

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

Answer 5

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á programado 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.