Juegos tipográficos: Una palabra por línea en puro Css

Cómo lograr en puro Css poner una palabra por línea, sin necesidad de añadir etiquetado extra en el Html. Y una vez logrado, mostrar textos en múltiples columnas con sólo una palabra por línea.

Juegos tipográficos: Una palabra por línea en puro Css

Por Kseso ✎ 3
Juegos tipográficos: Una palabra por línea en puro Css

Tienes un texto y necesitas que se muestre con una palabra por línea. Esto es, insertar un salto de línea después de cada palabra. Nada extraño. A todos alguna vez nos ha surgido esta situación. No importan los motivos. La cuestión es cómo hacerlo.

Pues nada tan sencillo como irse al html y llenar todo de saltos de línea <br/> o de <span>´s.

Si tras tener esta idea tan rupturista no sientes algo de hormigueo entre neurona y neurona, no hace falta que sigas leyendo este artículo.

Pero si prefieres una solución mucho más sencilla y elegante sin necesidad de tocar el Html sólo con Css, adelante. Que el post es cortito y al pie.

CSS dispone de una vieja propiedad para actuar sobre cada palabra de un texto. Y es en ella en la que nos apoyaremos para lograr líneas con una sola palabra: word-spacing.

Esta propiedad admite valores tanto positivos como negativos. Y le podemos declarar cualquier unidad de las admitidas por CSS para longitudes.

Otra característica de esta propiedad es que no fuerza o altera el tamaño de la caja que contiene el texto. Esto es, el tamaño de la caja anónima generada para contener a la última palabra no desborda en el eje X al elemento padre.

Este detalle es importante y es la base para el juego tipográfico de este artículo. Podemos declarar una separación entre palabras incuso mayor a 100vw y el único efecto es el deseado: actúa como un <br/> tras cada palabra para forzar un salto de línea pero no aumentar el tamaño de la caja que contiene al texto y por lo tanto no hay desborde (con los efectos derivados según el valor de overflow del elemento).

El código mágico es de lo más sencillo que ha aparecido por estas páginas:

.elemento { word-spacing: 100vw; }

El resto de estilos de la demo es sólo para dejarla más bonica.

See the Pen one word by line pure Css by Kseso (@Kseso) on CodePen.

Ver demo a full

1 palabra por línea en multicolumnas

Una variante a esta forma de presentar un título, si por su número de palabras diese lugar a una excesiva altura, es presentarlo en varias columnas manteniendo una palabra por línea.

Para ello, como en otras demos de este blog, basta con recurrir a la propiedad columns y sus complementarias.

Aprovecho la demo para introducir una pequeña variación para asegurar el contraste del texto con la imagen del fondo, añadiendo un span al marcado html, y con ello recordamos otra propiedad, vieja conocida del blog: box-decoration-break.

See the Pen MwjajX by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Una vez visto cómo mostrar una palabra por línea quizás te surja la inquietud de si será posible hacer lo mismo pero letra a letra. Y estás de enhorabuena. Porque sí, es posible y puedes ver cómo en los siguientes artículos del blog dedicados a ello:

  1. Una letra por línea sin marcado extra. El artículo incluye un caso de uso en un menú horizontal con sus ítems verticales.
  2. Menú deslizante letra a letra y opción tras opción. Y puestos a jugar con cada letra sin añadir marcado Html, seguro que también es de tu interés este artículo y su demo.

box-decoration-break

Hay elementos que al dibujarse en pantalla generan múltiples cajas. Como el span o cualquier otro elemento en línea que se distribuyen en más de una línea en la horizontal.

Cuando un elemento al ser computado da como resultado varias cajas generadas, la propiedad box-decoration-break permite controlar cómo se muestra tanto el fondo el fondo (cuando es una imagen o un gradiente) así como otras propiedades como padding, box-shadow, border-radius y las relativas a los bordes (tanto border como border-image. Entre otras.

Hay dos posibilidades y por lo tanto dos valores para esta propiedad:

Slice
La totalidad de las cajas generadas se tratan como una sola. Por lo tanto el fondo se prolonga de una a otra, no se producen sombras en los lados adyacentes, tampoco bordes, etc. Corresponde a la parte izquierda de la imagen siguiente.
Clone
Cada caja generada es tratada como un elemento independiente y a cada una de ellas se le aplican los valores de las propiedades. Ver la parte derecha de la imagen inferior.
imagen ilustrativa de Box-decoration-break
Box-decoration-break: "slice" a la izq. y "clone" a la drch

Es gracias a la declaración box-decoration-break: clone que en todas y cada una de las cajas generadas por el span se aplican tanto los bordes laterales, como las esquinas redondeadas y el padding lateral.

Artículo publicado originalmente en Noviembre de 2014. Ampliado con la segunda demo el 20 de Mayo de 2015

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 3

  1. Gracias por el aporte, siempre muy útil.

    ResponderEliminar
  2. Hola, gracias por el aporte, es muy interesante.
    Me gustaría saber cómo haces para que una palabra se recuadre. Gracias

    ResponderEliminar
    Respuestas
    1. Hola Pepa
      Tal como puedes ver en el artículo:
      1º: letter-spacing fuerza a colocarse cada una línea diferente.
      2º El elemento span es un elemento en línea. Por tanto su anchura es la que fuerza su contenido.
      3º El elemento span> tiene declarado el fondo y los bordes y padding laterales.
      4º Al dibujarse un elemento de tipo "inline" (como nuestro span) en varias líneas o renglones horizontales crea múltiples cajas (en esta demo tantas como palabras tiene el h1).
      5º Por defecto en estas cajas el borde y padding izquierdo sólo se dibujaría en la primera caja generada por el span (la palabra "title") y el borde y padding derecho en la última caja (la palabra "cols").
      6º Al usar la declaración box-decoration-break: clone; lo indicado en el punto 5º no ocurre y en cada caja generada por el span (cada una de las palabras del título) se aplican los bordes y paddings laterales.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap