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

https://stackoverflow.com/questions/802175

03-07-2019
|

Pregunta

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

He truncado el lado del servidor por el ancho lógico (es decir, un número de caracteres calculado a ciegas), pero como 'w' es más ancho que una 'i', esto tiende a ser subóptimo. , y también me obliga a volver a adivinar (y seguir 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 sea de navegador cruzado. Esta propiedad parece ser (algo?) Estándar pero no es compatible con Firefox. He encontrado varios soluciones basadas en el desbordamiento de : oculto , pero o bien no muestran puntos suspensivos (quiero que el usuario sepa que el contenido está truncado), 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 el que obtendré por ahora?

Solución

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, viene con el inconveniente de no permitir que se seleccione el texto en Firefox. Consulte 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. Vea el final de esta publicación 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');
}

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>

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 .

Otros consejos

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

Demostración en http://jsbin.com/leyukama/1/ (uso jsbin porque es compatible con 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 desbordamiento de texto, pero las versiones de IE de 6 a 11 ya admiten 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 lo señaló Simon Lieschke (en otra respuesta), Firefox solo admite la propiedad de CSS con desbordamiento de texto de Firefox 7 en adelante (publicada el 27 de septiembre de 2011).

Volví a verificar este comportamiento en Firefox 3.0 & amp; 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 información sobre herramientas al pasar el mouse cuando se apliquen puntos suspensivos, esto se puede hacer a través de javascript, consulte estas preguntas: detección de puntos suspensivos de texto HTML desbordado y HTML: ¿cómo puedo mostrar información sobre herramientas SÓLO cuando se activa ellipsis

Recursos:

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 /

Bien, Firefox 7 implementó texto-desbordamiento: puntos suspensivos así como texto-desbordamiento: " cadena " . El lanzamiento final está previsto para 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 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

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

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow