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: