Textos y alineaciones

CSS dispone de ciertas propiedades relacionadas con el texto de una página, pero alejándose de criterios de tipografías, y centrándose más en objetivos de alineación o tratamiento de espaciados. Veamos algunas de estas propiedades:

Propiedad	Valor	Significado
letter-spacing	normal |	Espacio entre letras (tracking)
word-spacing	normal |	Espacio entre palabras
line-height	normal |	Altura de una línea (interlineado)
text-indent		Indentación de texto (sangría)
white-space	normal | nowrap | pre | pre-line | pre-wrap	Comportamiento de los espacios
tab-size	|	Ancho de las tabulaciones (espacio o tamaño)
direction	ltr | rtl	Dirección del texto

Las tres primeras propiedades, determinan el espacio en diferentes zonas del texto. Por ejemplo la primera de ellas, letter-spacing , especifica el espacio de separación que hay entre cada letra de un texto, denominado comúnmente interletraje o tracking. Con números negativos tendremos más unidas las letras y con números positivos, las tendremos más separadas unas de otras.

La propiedad line-height especifica la altura que tendrá cada línea de texto, una característica que puede facilitar muchísimo la lectura, puesto que un interlineado excesivo puede desorientar al lector, mientras que uno insuficiente puede hacer perder al visitante el foco en el texto.

La propiedad word-spacing permite establecer el espacio que hay entre una palabra y otra en un texto determinado, lo que puede facilitar la legibilidad de los textos de una página web y da flexibilidad y control sobre ciertas tipografías.

La propiedad text-indent establece un tamaño de indentación (por defecto, 0), o lo que es lo mismo, hace un sangrado, desplazando el texto la longitud especificada hacia la derecha (o izquierda en cantidades negativas).

Al utilizar white-space podemos indicar el comportamiento que tendrán los espacios en blanco en una página web. Por defecto, el valor es normal (transforma múltiples espacios en blanco en un solo espacio consecutivo), pero tiene otras opciones posibles:

Valor	Espacios en blanco consecutivos	Contenido
normal	Los espacios se transforman en uno solo.	Se ajusta al contenedor.
nowrap	Los espacios se transforman en uno solo.	Ignora saltos de línea.
pre	Respeta literalmente los espacios.	Ignora saltos de línea.
pre-wrap	Respeta literalmente los espacios.	Se ajusta al contenedor.
pre-line	Respeta literalmente los espacios y suprime los espacios del final.	Se ajusta al contenedor.

Nota: La diferencia entre pre-wrap y pre-line es que este último respeta literalmente los espacios que están antes del texto, mientras que si sobran después del texto, los suprime.

Probablemente, a medida que realices diferentes diseños, te encontrarás con la desagradable situación en la que un texto concreto (por ejemplo, un enlace demasiado largo) no cabe dentro de un contenedor, por lo que el texto se desborda y provoca efectos no deseados como salirse de su lugar.

Propiedad	Valor	Significado
hyphens	manual | none | auto	Indica si se debe dividir las palabras por guiones.
overflow-wrap	normal | break-word | anywhere	Dividir palabras para evitar desbordamientos.
line-break	auto | loose | normal | strict | anywhere	Determina como dividir líneas.
word-break	normal | keep-all | break-all	Establece si está permitido partir palabras.

OJO: La propiedad overflow-wrap sólo funciona cuando white-space está establecida a valores que respeten espacios. Además, la propiedad word-wrap es un alias de overflow-wrap por temas de retrocompatibilidad.

Existen formas de mitigar este problema, como la propiedad word-break , word-wrap o la propiedad hyphens , sin embargo, aún están en fase de desarrollo y su soporte está poco extendido en la actualidad. Aún así, si quieres probar una combinación de varias propiedades que suele dar resultado para paliar este comportamiento, puedes probar lo siguiente:

.container {
    hyphens: auto;
    word-wrap: break-word;
    word-break: break-word;
}

Por otra parte, la propiedad tab-size permite establecer el número de espacios que se mostrarán en el cliente o navegador al representar el carácter de un TAB (tabulador), que generalmente se convierten a un espacio en blanco, pero sin embargo son visibles en elementos HTML como <textarea> o <pre> .

Por último, la propiedad direction permite establecer la dirección del texto: de izquierda a derecha (ltr, left to right) o de derecha a izquierda (rtl, right to left).

Alineaciones

También existen varias propiedades CSS que permiten modificar las diferentes alineaciones de los textos en su conjunto. Veamos un resumen de ellas:

Propiedad	Valor	Significado
text-align	left | center | right | justify	Justificación del texto
text-justify	auto | inter-word | inter-character | none	Método de justificación de textos
text-overflow	clip | ellipsis | texto	Comportamiento cuando el texto no cabe «[...]»

En el primer caso, se puede establecer los valores left , right , center o justify a la propiedad text-align para alinear horizontalmente el texto a la izquierda, a la derecha, en el centro o justificar el texto, respectivamente, de la misma forma que lo hacemos en un procesador de texto.

En la propiedad text-justify indicamos el tipo de justificación de texto que el navegador realizará: automática (el navegador elige), ajustar el espacio entre palabras (el resultado de ajustar con la propiedad word-spacing), ajustar el espacio entre par de carácteres (el resultado de ajustar con la propiedad letter-spacing) y justificación desactivada.

Por su parte, la propiedad text-overflow cambia el comportamiento del navegador cuando detecta que un texto no cabe y se desborda. En ella podemos utilizar los valores clip , desbordar el contenedor (comportamiento por defecto), ellipsis , que muestra el texto «...» cuando no cabe más texto y por último indicar el texto que queremos utilizar en lugar de «...».

Al igual que existe text-align para alinear horizontalmente, también existe la propiedad vertical-align , que se encarga de la alineación vertical de un elemento, pudiendo establecer como valor las siguientes opciones:

Valor	¿Cómo hace la alineación?
baseline	La base del elemento con la base del elemento padre.
sub	El elemento como un subíndice.
super	El elemento como un superíndice.
top	La parte superior del elemento con la parte superior del elemento más alto de la línea.
middle	El elemento en la mitad del elemento padre.
bottom	La parte inferior del elemento con la parte inferior del elemento más bajo de esa línea.
text-top	La parte superior del elemento con la parte superior del texto padre.
text-bottom	La parte inferior del elemento con la parte inferior del texto padre.
tamaño	Sube o baja un elemento el tamaño o porcentaje especificado.

Consejo: Cuidado con vertical-align . Esta propiedad puede querer utilizarse para centrar verticalmente un elemento, sin embargo, su utilización es un poco menos intuitiva de lo que en un principio se cree, ya que se debe utilizar para alinear textos respecto a elementos. Para alinear bloques de contenido o crear estructuras de diseño, véase Flexbox.

Variaciones

Por último, existen varias propiedades aplicables a los textos para variar su naturaleza. Echemos un vistazo:

Propiedad	Valor	Significado
text-decoration	none | underline | overline | line-through	Indica el tipo de subrayado (decoración)
text-transform	none | capitalize | uppercase | lowercase	Transforma a mayús/minús o texto capitalizado

La propiedad text-decoration permite establecer subrayados (underline), subrayados por encima del texto (overline) y tachados (line-through). Indicando el valor none se puede eliminar cualquiera de los formatos anteriores. Es muy utilizado, por ejemplo, para eliminar el subrayado de los textos que tienen un enlace o hipervínculo.

Por último, la propiedad text-transform es muy útil para convertir textos a mayúsculas (uppercase) o minúsculas (lowercase), o incluso capitalizar el texto (capitalize), es decir, poner sólo la primera letra en mayúscula, independientemente de como esté escrito en el documento HTML.