JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

CSS: cómo truncar texto con puntos suspensivos automáticamente

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:

TruncarTexto_1

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:

TruncarTexto_2

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

TruncarTexto_3

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!

¿Este post te ha ayudado?, ¿has aprendido algo nuevo? Pues ¡ayúdame a ayudar a otros! No te costará nada y puedes conseguir premio. Es muy importante. Pulsa para saber más...
José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (18) -

Buenas tardes!!, me ha sido de gran ayuda pero no me a solucionado del todo el problema, es decir, he conseguido que no coloque el texto en lineas hacia abajo si no que lo mantenga en la horizontal, pero se sale del bloque y no me pone los puntos suspensivos, por lo menos si me cortase el texto me quedaría satisfecho pero me lo deja así:
[Este es un mensaje de prueba para ve]r si funciona el tutorial

¿Como corto el texto aunque sea para que no se muestre?.

Responder

como puedo hacer que aparezcan los puntos suspensivos después de que el texto se coloque en 3 lineas ?

ej: como lo explicaste aparece así:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...

ej: como yo quiero que aparezcan los puntos suspensivos, después de que el texto lleve 3 lineas:
aaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaa...

no se si me explique bien lol, ¡saludos!

Responder

Spain José Manuel Alarcón

Hola Josué:

Este atributo CSS solo funciona con contenidos en una única línea, no para varias líneas... Además en el caso que tú mencionas no hay cambios de línea nunca porque la palabra es muy larga y única (no hay espacios ni puntuaciones por el medio), por lo que tampoco se va a romper y cambiar de línea.
Tendrías que usar JavaScript de alguna manera para conseguirlo.

Existen técnicas para simular algo así con frases normales (es decir, que tengan espacios y separaciones entre palabras), pero son bastante liossas:

www.mobify.com/.../

Saludos.

Responder

Buenas, me ha sido de mucha ayuda, pero como me ha funcionado correctamente es con este código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Texto truncado</title>
    <style type="text/css">
      #contenido { width:80%; height:200px; background-color:orange; }
      #responsive_text {font-size:24pt; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;}
    </style>
  </head>
  
  <body>
    <div id="contenido">
      <p id="responsive_text">Todo lo que siempre quisiste saber sobre HTML, CSS y JavaScript y no te atreviste a preguntar.</p>
    </div>
  </body>
</html>

Responder

Guillermo Rojas

También puedes usar el plugin jquery dotdotdot  http://dotdotdot.frebsite.nl/

Responder

SOLUCIÓN LO BUSQUE POR TODOS LADOS Y LO ENCONTRE LES COMPARTO

Es este codigo que va en el css "word-wrap:break-word"  trabaja con el width segun el tamaño
word-wrap: break-word; width:100%;

<div style="float:left; margin:10px 0 0 0; word-wrap: break-word; width:100%;"><?php echo $sqlll[$v]["descripcion"];?></div>

Responder

Gracias esa era la solucion

   width:100%;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: break-word;


Genio!!

Responder

Exelente ¡¡¡ me funciono  a la primera y exactamente lo que queria
Saludos

Responder

Muchas gracias,

Responder

Harvey Tamayo

Mil Gracias, Es justo lo que estaba buscando. Saludos desde Colombia.

Responder

Hola, la publicidad no me deja ver la barra lateral...

Responder

by Jose M. Alarcon

¿Qué publicidad? ¿Qué barra lateral? ¿Con qué dispositivo accedes? Cuelga una captura en algún lado para verlo.
Si me cuentas mejor cuál es tu problema a ver si te puedo ayudar...

Responder

Hola, me ayudó mucho, me gustaría cancelarlo para pantallas más chicas, hay alguna forma de hacerlo?Gracias

Responder

muy bueno, yo quiero que salga el texto por los lados de un contenedor de de lieas suspensibas  -----------------.... como lo ves. ahora no puedo, mas adelante mirare alguno de tus cursos. un saludo

Responder

se puede hacer apareser los puntitos despues de cierta cantidad de caracteres?
ejemplo: (despues de 10 caracteres)
original--este es un texto
truncado--este es un...

Responder

Amigo pero si quiero que en vez de puntos solo se desvanezca?

Responder

Muchas gracias, me sirvió.

Responder

highlander

gracias, sencillo y claro

Responder

Agregar comentario