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
ypre-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 cuandowhite-space
está establecida a valores que respeten espacios. Además, la propiedadword-wrap
es un alias deoverflow-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).
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.
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.