Truncar cadenas largas con CSS: ¿es posible?

¿Hay alguna forma de truncar texto con HTML y CSS simples, de modo que el contenido dynamic pueda caber en un diseño de ancho y alto fijo?

He estado truncando el lado del servidor por ancho lógico (es decir, un número de caracteres oculto 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) la cantidad de caracteres por cada ancho fijo. Idealmente, el truncamiento ocurriría en el navegador, que conoce el ancho físico del texto renderizado.

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

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

Actualización: text-overflow: ellipsis ahora es compatible a partir de 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, tiene el inconveniente de no permitir que el texto sea seleccionado en Firefox. Revisa su publicación de invitado en el blog de Matt Snider para obtener 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. Vea al final de esta publicación una solución alternativa.

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

           

Actualización del contenido del nodo

Para actualizar el contenido de un nodo de 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: truncar cadenas largas con CSS: una nueva respuesta con foco en el soporte del navegador

Demostración en http://jsbin.com/leyukama/1/ (uso jsbin porque es compatible con la versión anterior de IE).

  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 

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

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

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

Firefox: como 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é este comportamiento dos veces en Firefox 3.0 y Firefox 6.0 (no se admite el desbordamiento de texto).

Algunas pruebas adicionales en un navegador web Mac OS serían necesarias.

Nota: es posible que desee mostrar una información sobre herramientas en el mouse cuando se aplica una elipsis, esto se puede hacer a través de javascript, consulte estas preguntas: detección de puntos suspensivos de texto HTML y HTML – ¿cómo puedo mostrar información sobre herramientas SOLAMENTE cuando se activan puntos suspensivos?

Recursos:

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

OK, Firefox 7 implementó text-overflow: ellipsis text-overflow: "string" . La publicación final está prevista para el 2011-09-27.

Otra solución al problema podría ser el siguiente conjunto de reglas de 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 se desborda o no del contenedor. Aún así, si tiene un caso en el que tiene muchos 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 de Justin Maxwell

Como referencia, aquí hay un enlace al desbordamiento de texto de seguimiento de “errores” : compatibilidad con puntos suspensivos en Firefox . Parece que Firefox es el único navegador importante que no admite una solución de CSS nativa.

 .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }