CSS incorpora gran cantidad de propiedades para modificar el comportamiento de los textos de una página web.

CSS también dispone de ciertas propiedades relacionadas con el texto con objetivos de alineación o tratamiento de espaciados. Veamos algunas de ellas:

Propiedad Valor Significado
letter-spacing: normal | tamaño Espacio entre letras (tracking)
line-height: normal | tamaño Altura de una línea (interlineado)
text-indent: tamaño Indentación de texto (sangría)
word-spacing: normal | tamaño Espacio entre palabras
white-space: normal | nowrap | pre | pre-line | pre-wrap Comportamiento de los espacios
tab-size: número de espacios | tamaño Ancho de las tabulaciones
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.

Alineaciones de texto

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

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.

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.

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:

div#container {
         word-wrap: break-word;
    -ms-word-break: break-all;
        word-break: break-word;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
}

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:

Propiedad Valor Significado
text-align: left | center | right | justify Justificación del texto
text-justify auto | inter-word | distribute | none Tipo 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. Recomiendo intentar experimentar con ella antes de utilizarla con asiduidad.

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.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).