Títulos en sumarios que no cuadran: text-overflow | Oloblogger Cuando montamos un sistema de sumarios uno de los problemillas que surgen es qué hacer con los títul...

21 de marzo de 2013

Títulos en sumarios que no cuadran: text-overflow

Cuando montamos un sistema de sumarios uno de los problemillas que surgen es qué hacer con los títulos de las entradas cuando por necesidades del diseño tenemos que encuadrarlos en un espacio limitado. Estos son de longitud variable, unas veces más cortos y otras más largos y por tanto lo mismo nos ocupan una línea, que dos, que tres... Lo mismo sucede si tenemos una plantilla adaptable (al ancho, se entiende), porque al reducir la ventana el número de líneas también van a incrementarse.

Lo normal cuando se monta una caja es que esta no tenga un ancho y alto definido para que su contenido sea el que marque el tamaño y de esta manera, la caja es más grande o más pequeña según la extensión de lo que haya dentro, sea texto, sea imagen, sea otro tipo de elemento.

El planteamiento de esta entrada es sólo para texto y voy a ilustrarlo con capturas de la plantilla Blogger Store. Esta sería la primera, con el caso general de una caja para el título sin altura definida.

.grid h3 {
width: 138px;
}


Como podéis ver, cuando se deja la caja contenedora de los títulos a su libre albedrío, esta se adapta a la longitud del texto estirándose en altura. Vamos, lo normal... En el ejemplo se ve perfectamente cómo dos son mas altas por ese motivo, cosa que provoca el descuadre del diseño. Aquí quizás no se aprecia demasiado, pero según la página va teniendo más entradas, más feo se pone el asunto.


Una primera solución sería ponerle un height fijo del doble de la altura de la fuente. Con esto minimizamos el problema porque se producirá con muchos menos títulos, ya que la mayoría entrarán en esas dos líneas.

.grid h3 {
width: 138px;
height: 34px;
}


Pero cuando ocupen tres líneas volveremos a la misma historia y además al haber limitado la altura, el texto desbordará su contenedor con un efecto chungo, así que como medida adicional podemos añadir un overflow:hidden para que no se vea lo que debería sobresalir. Un ejemplo con espacio reservado para una sola línea de altura:

.grid h3 {
height: 17px;
overflow: hidden;
}


Como podéis ver, la segunda línea queda oculta al haber limitado el alto y escondido el sobrante que quedaría por debajo. Y lo mismo podemos hacer si en lugar de usar overflow, usamos white-space: nowrap. En este caso lo que evitamos es que exista más de una línea y el ancho será el que limite el contenido y esconda lo que sobra por la derecha.

.grid h3 {
white-space: nowrap;
}


Pero si ya es desagradable que el texto se corte por palabras dónde el borde exterior manda, casi peor es esto de que una letra se pueda quedar a medias.


Pues bien, hace muy poco descubrí una propiedad CSS -para mí curiosa- que arregla esto un poco y que lo que hace es cortar los textos de una forma más elegante y que consiste en añadirles tres puntos suspensivos. Se trata de text-overflow, que en conjunción con overflow:hidden y white-space:nowrap, produce esta otra salida:

.grid h3 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}


Lo que hace esta propiedad es cortar la palabra por un carácter determinado y añadirle los puntitos, de manera que siempre queda todo dentro de la caja. No es una solución óptima, pero es sencilla y digna, además de que para plantillas adaptables creo que viene muy bien ¿no?


Para quién quiera profundizar en la propiedad la tiene explicada (en inglés) en un borrador de W3C que incluye otras características actualmente en discusión.


Y a modo de resumen unas pequeñas demos con efecto hover para ver qué pasaría en cada caso con cajas adaptables:


Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Con overflow:hidden

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Con white-space: nowrap;

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Con overflow: hidden y white-space: nowrap;

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Con overflow: hidden, white-space: nowrap y text-overflow: ellipsis

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

8 comentarios :

  1. Muy bueno el post, me hubiera venido perfecto no hace mucho, cuando utilizaba resúmenes personalizados, pero me cambié definitivamente a las vistas dinámicas.
    Saludos!

    ResponderEliminar
  2. aaaaaaaaa de lujo!! justamente me pasó que como me quedaban horrendas saqué los sumarios y volví a la plantilla normal, pero ahora me gusta esta solución!

    ResponderEliminar
  3. Pero qué maravilla, yo me ando rompiendo la cabeza con scripts para calcular la longitud y recortar según dicha longitud, pero se puede obtener el mismo resultado con tres simples propiedades CSS.
    Gracias :)

    ResponderEliminar
    Respuestas
    1. Sí. Es la típica cosa que desconocemos y que cuando la descubrimos nos abre los ojos. A mí me ha pasado con infinidad de cosas... ;)

      Eliminar
  4. Una consulta: ¿se puede lograr el mismo resultado pero en varias lineas?. Es decir que un texto de párrafo se corte en una determinada altura; porque de esta forma se corta a lo ancho.
    Gracias..

    ResponderEliminar
    Respuestas
    1. Con esto no. El white-space: nowrap; precisamente es para dejar todo en una sola línea. Puedes hacer alguna de las cosas que se explican como preámbulo, pero no te saldrán con los tres puntos, tal y como se comenta. Las otras opciones que conozco serían con JavaScript, pero sinceramente no creo que merezca la pena montar uno sólo para los títulos.

      Eliminar