Post original en JASoft.org: http://www.jasoft.org/Blog/post/CSS-como-truncar-texto-con-puntos-suspensivos-automaticamente.aspx
Cuando diseñamos una interfaz de usuario o una página web, es muy complicado saber de antemano si un determinado texto va a caber dentro de un elemento o no, sobre todo teniendo en cuenta que los diseños fluidos actuales varían constantemente su tamaño para adecuarse al espacio disponible.
Para ver a qué me refiero imagina por ejemplo, el título de un artículo que quieres que entre en una sola línea para que no se desplace hacia abajo, rompiendo el diseño, cuando es muy largo. O por ejemplo que quieres crear algunos “tiles” del estilo de los que tiene Windows 8, con textos variables en longitud, y que aunque sean textos muy largos no quieres que puedan ocupar más espacio horizontal del disponible.
Por ejemplo, consideremos este código sencillo de una página:
1: <!doctype html>
2: <html lang="en">
3: <head>
4: <meta charset="UTF-8">
5: <title>Texto truncado</title>
6: <style type="text/css">
7: #contenido {
8: width:80%;
9: height:200px;
10: background-color:orange;
11: color:white;
12: font-size:24pt;
13: }
14:
15: </style>
16: </head>
17: <body>
18: <div id="contenido">
19: Todo lo que siempre quisiste saber sobre HTML, CSS y JavaScript y no te atreviste a preguntar.
20: </div>
21: </body>
22: </html>
Si renderizamos este bloque obtendremos la siguiente figura:
El texto, al ser mucho más largo que el ancho disponible, se cambia de línea y mueve todo el contenido hacia abajo.
Podemos añadirle al estilo lo siguiente:
white-space:nowrap;
y conseguiremos que el texto no cambie de línea, pero se saldrá por el fondo dejándose de ver, lo cual queda muy feo:
En estos casos lo que se suele hacer es cortar el texto añadiéndole unos puntos suspensivos al final, para denotar que el texto sigue. Se trata de una indicación ya estándar hoy en día y que todos los usuarios entienden. Lo ideal sería que quedara algo así (fíjate en los puntos suspensivos del final):
Además esto debería ser dinámico, de modo que si el usuario cambia el tamaño de la pantalla, en tiempo real se truncase el texto por el lugar adecuado, teniendo en cuenta además el posible “padding” o relleno que exista, etc…
Conseguir esto en un diseño de ancho fijo es sencillo porque podemos cortar el texto y añadirle los puntos antes de enviarlo al cliente y listo. El problema es que, como comentaba antes, los diseños actuales suelen ser fluidos, de modo que adaptan sus dimensiones horizontales al espacio disponible en la pantalla. Ello no nos permite calcular en cuántos caracteres debemos cortar para añadir los puntos suspensivos, por lo que no hay una forma fácil de conseguirlo mediante código, ni siquiera con JavaScript (se puede, pero es complejo).
CSS3 viene a nuestro rescate con una propiedad nueva llamada text-overflow, que hay que utilizar combinada con otras.
Esta propiedad nos permite indicar qué caracteres queremos usar para truncar una cadena de texto lineal en caso de que no entre en su contenedor. Es decir, justo lo que queremos conseguir. En la práctica el único valor que podemos asignarle es “ellipsis”, que es el nombre que reciben esos tres puntos. En el estándar está definido que si le asignas una cadena cualquiera será la que utilice para truncar el texto, pero el único navegador que soporta esa características es Firefox hoy en día, así que mejor obviarlo. El otro valor posible es “clip” que lo que hace es cortarlo simplemente, o sea, el comportamiento por defecto.
Las condiciones para poder usarlo y conseguir el efecto deseado son que el texto debe estar en una única línea, es decir, no puede hacerse “wrapping” del mismo, lógicamente, sino no hay necesidad de truncarlo. Además debemos establecer explícitamente el tipo de “overflow” del contenedor y asignarle el valor “hidden” para que no muestre elementos que queden fuera del contenedor.
Este post está basado en material extraído de mi curso online de HTML(5) y CSS(3) de campusMVP. Si quieres aprender de verdad sobre este tema y tenerme como tutor para contestar tus dudas empieza hoy mismo.
Según todo esto, los estilos que debemos utilizar para conseguir el efecto de la última figura serían estos:
#contenido {
width:80%;
height:200px;
background-color:orange;
color:white;
font-size:24pt;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
}
Es decir, las 3 últimas líneas, le están indicando al contenido que si se sale por un lateral que no se muestre, que no se cambie de línea el contenido “inline” y que, en caso de salirse el texto por un lateral, que le incluya los puntos suspensivos automáticamente por donde proceda.
Con esto conseguimos el efecto deseado y además los puntos se colocan en tiempo real si variamos el ancho del contenedor por el motivo que sea.
¡Espero que te sea útil!
Una característica muy interesante introducida en CSS3 es la posibilidad de asignar valores a propiedades CSS utilizando cálculos, de forma que en lugar de utilizar valores constantes coo siempre, se utilicen valores dinámicos que varíen en función de ciertas condiciones.
