with - Truncar cadenas largas con CSS: ¿factible todavía?

truncar texto css (6)

¿Hay alguna buena manera de truncar el texto con HTML plano y CSS, de modo que el contenido dinámico pueda caber en un diseño de ancho y alto fijo?

He estado truncando el lado del servidor por el ancho lógico (es decir, un número de caracteres adivinado a ciegas), pero como una ''w'' es más ancha que una ''i'', esto tiende a ser subóptimo, y también me obliga a volver a adivinar ( y sigue ajustando) el número de caracteres para cada ancho fijo. Lo ideal sería que el truncamiento ocurriera en el navegador, que conoce el ancho físico del texto representado.

Descubrí que IE tiene una propiedad de text-overflow: ellipsis que hace exactamente lo que quiero, pero necesito que esto sea un navegador cruzado. Esta propiedad parece ser (¿algo?) Estándar, pero no es compatible con Firefox. He encontrado various workarounds basadas en el overflow: hidden , pero o bien no muestran puntos suspensivos (quiero que el usuario sepa que el contenido se ha truncado), o lo muestran todo el tiempo (incluso si el contenido no se ha truncado) .

¿Alguien tiene una buena manera de ajustar el texto dinámico en un diseño fijo, o el truncamiento del lado del servidor por ancho lógico es tan bueno como el que obtendré por ahora?

Bien, Firefox 7 implementó text-overflow: ellipsis así como text-overflow: "string" . El lanzamiento final está previsto para 2011-09-27.

Otra solución al problema podría ser el siguiente conjunto de reglas CSS:

.ellipsis{ white-space:nowrap; overflow:hidden; } .ellipsis:after{ content:''...''; }

El único inconveniente con el CSS anterior es que agregaría el "..." independientemente de si el texto sobrepasa el contenedor o no. Aún así, si tiene un caso en el que tiene un montón de elementos y está seguro de que el contenido se desbordará, este sería un conjunto de reglas más simple.

Mis dos centavos. Felicitaciones a la técnica original por Justin Maxwell

Para referencia, aquí hay un enlace al "error" de seguimiento de desbordamiento de texto: soporte de puntos suspensivos en Firefox . Parece que Firefox es el único navegador importante que no admite una solución CSS nativa.

Si está de acuerdo con una solución de JavaScript, hay un complemento de jQuery para hacer esto de manera cruzada con el navegador: consulte http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via-jquery/

Actualización: text-overflow: ellipsis ahora es compatible con Firefox 7 (lanzado el 27 de septiembre de 2011). ¡Hurra! Mi respuesta original sigue como un registro histórico.

Justin Maxwell tiene una solución CSS de navegador cruzado. Sin embargo, viene con la desventaja de no permitir que se seleccione el texto en Firefox. Echa un vistazo a su publicación invitada en el blog de Matt Snider para conocer todos los detalles sobre cómo funciona esto.

Tenga en cuenta que esta técnica también evita la actualización del contenido del nodo en JavaScript utilizando la propiedad innerHTML en Firefox. Ver el final de este post para una solución.

CSS

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -moz-binding: url(''assets/xml/ellipsis.xml#ellipsis''); }

Contenidos del archivo ellipsis.xml

<?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <binding id="ellipsis"> <content> <xul:window> <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description> </xul:window> </content> </binding> </bindings>

Actualizando el contenido del nodo

Para actualizar el contenido de un nodo de una manera que funcione en Firefox, use lo siguiente:

var replaceEllipsis(node, content) { node.innerHTML = content; // use your favorite framework to detect the gecko browser if (YAHOO.env.ua.gecko) { var pnode = node.parentNode, newNode = node.cloneNode(true); pnode.replaceChild(newNode, node); } };

Vea la publicación de Matt Snider para una explicación de cómo funciona esto .

Marzo de 2014: truncamiento de cadenas largas con CSS: una nueva respuesta centrada en la compatibilidad con navegadores

Demostración en http://jsbin.com/leyukama/1/ (uso jsbin porque soporta la versión antigua de IE).

<style type="text/css"> span { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/ -o-text-overflow: ellipsis; /** Opera 9 & 10 **/ width: 370px; /* note that this width will have to be smaller to see the effect */ } </style> <span>Some very long text that should be cut off at some point coz it''s a bit too long and the text overflow ellipsis feature is used</span>

La propiedad CSS -ms-text-overflow no es necesaria: es un sinónimo de la propiedad CSS de overflow de texto, pero las versiones de IE de 6 a 11 ya admiten la propiedad CSS de overflow de texto.

Probado con éxito (en Browserstack.com) en el sistema operativo Windows, para navegadores web:

IE6 a IE11
Ópera 10.6, Ópera 11.1, Ópera 15.0, Ópera 20.0
Chrome 14, Chrome 20, Chrome 25
Safari 4.0, Safari 5.0, Safari 5.1
Firefox 7.0, Firefox 15

Firefox: como lo señaló Simon Lieschke (en otra respuesta), Firefox solo admite la propiedad CSS de desbordamiento de texto desde Firefox 7 en adelante (lanzado el 27 de septiembre de 2011).

Comprobé dos veces este comportamiento en Firefox 3.0 y Firefox 6.0 (no se admite el desbordamiento de texto).

Serían necesarias algunas pruebas adicionales en los navegadores web de Mac OS.

Nota: es posible que desee mostrar una información sobre herramientas al pasar el mouse cuando se apliquen puntos suspensivos, esto se puede hacer a través de javascript, vea estas preguntas: detección de puntos suspensivos de texto HTML desbordado y HTML: ¿cómo puedo mostrar la información sobre herramientas SOLAMENTE cuando los puntos suspensivos están activados?

Recursos: