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

¿Hay alguna buena manera de truncar texto con HTML y CSS simples, 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 dado que una 'w' es más ancha que una 'i', esto tiende a ser subóptimo y también requiere que vuelva a adivinar ( y sigue ajustando) el número de caracteres para cada ancho fijo. Idealmente, el truncamiento ocurriría en el navegador, que conoce el ancho físico del texto renderizado.

Descubrí que IE tiene una text-overflow: ellipsispropiedad que hace exactamente lo que 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 se truncó) o lo muestran todo el tiempo (incluso si el contenido no se truncó).

¿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 voy a obtener por ahora?

Actualización: text-overflow: ellipsisahora 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, viene con la desventaja de no permitir que el texto se seleccione en Firefox. Echa un vistazo a su publicación de invitado en el blog de Matt Snider para obtener todos los detalles sobre cómo funciona

Tenga en cuenta que esta técnica también impide actualizar el contenido del nodo en JavaScript utilizando la innerHTMLpropiedad en Firefox. Vea el final de esta publicación para 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');
}

ellipsis.xml contenido del archivo

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

Actualización del 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 obtener una explicación de cómo funciona esto .

Marzo de 2014: truncamiento de cadenas largas con CSS: una nueva respuesta centrada 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).

<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 sinónimo de la propiedad CSS text-overflow, pero las versiones de IE del 6 al 11 ya admiten la propiedad CSS text-overflow.

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

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

Se necesitarían algunas pruebas adicionales en los navegadores web de Mac OS.

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 HTML con desbordamiento de texto y HTML: ¿cómo puedo mostrar información sobre herramientas SOLAMENTE cuando se activa la elipsis?

Recursos:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

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

OK, Firefox 7 implementado text-overflow: ellipsistan bien como text-overflow: "string". El lanzamiento final está previsto para el 27/09/2011.

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 desborda 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 de Justin Maxwell