El texto tiene muchas características que se pueden modificar con el lenguaje CSS, más allá de las propiedades relativas a las fuentes. Por ejemplo, se puede modificar la alineación del texto, el color, el espacio que queda entre líneas, entre letras o entre palabras, el sangrado, etc. En definitiva, se trata de propiedades enfocadas a la disposición y comportamiento del texto.
| Propiedad | Descripción |
|---|---|
color | Define el color del texto. |
word-spacing | Define el espaciado entre palabras. |
letter-spacing | Define el espaciado entre letras. |
text-align | Alinea el texto horizontalmente. |
vertical-align | Alinea el texto verticalmente. |
text-decoration | Define la decoración del texto. |
text-transform | Transforma entre mayúsculas y minúsculas. |
text-indent | Indica el sangrado del texto. |
white-space | Indica el tratamiento del espacio en blanco. |
text-overflow | Indica al usuario el desborde del texto. |
El color del texto: propiedad ‘color’
El color del texto se modifica con la propiedad color. Como valor se debe indicar un color válido, es decir, una de las 140 palabras clave (nombre de color), las palabras clave inherit y currentcolor, un código hexadecimal o valores numéricos mediante los modelos de color RGB y HSL.
Por ejemplo, texto rojo con código hexadecimal:
.rojo { color: #f00 }
Párrafo con texto de color rojo.
Por defecto, la mayoría de navegadores web establecen el color negro para el texto. Si se quiere cambiar el color del texto en todos los elementos del documento, debido a que esta propiedad CSS se hereda de forma predeterminada, se puede asignar un color al elemento HTML <body> directamente.
Sobre la herencia: hay que tener en cuenta que el color no se hereda a los elementos de enlace (elemento HTML <a>). Por lo tanto, es necesario indicar el color de los enlaces de forma explícita.
Separación de palabras: propiedad ‘word-spacing’
La propiedad word-spacing permite modificar el espacio que queda entre palabras. Por defecto, la separación viene definida por la propia fuente y/o el navegador web. Los valores admitidos son unidades de longitud, que también pueden ser relativas o absolutas; y admite valores negativos.
.palabras { word-spacing: 12px }
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hay que tener cuidado de no usar un espaciado entre palabras demasiado grande, ya que con tanta separación se podría dificultar su lectura.
Separación de letras: propiedad ‘letter-spacing’
Mediante la propiedad letter-spacing se pueden separar las letras de un texto. Se trata de un espaciado horizontal entre caracteres, también conocido como interletraje. Esta propiedad admite valores de longitud (absolutos y relativos) y valores negativos. Su valor por defecto es 0.
.letras { letter-spacing: 4px }
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Una separación de letras demasiado grande dificulta enormemente la lectura, ya que impide conocer el principio y el final de las palabras.
Alineación horizontal: propiedad ‘text-align’
El texto se puede alinear horizontalmente con la propiedad text-align. Los valores definidos por CSS ofrecen la posibilidad de alinear texto a la izquierda (left, valor por defecto), a la derecha (right), al centro (center), justificado (justify) y herencia del elemento padre (inherit).
Hay que tener en cuenta que la propiedad text-align alinea todo el contenido que se encuentre dentro de un elemento. Esto significa que no sólo alinea horizontalmente el texto del elemento, sino que también alinea las imágenes, elementos de formulario, objetos, mapas o vídeos.
Veamos algunos ejemplos:
.izquierda { text-align: left }
.centro { text-align: center }
.derecha { text-align: right }
Texto alineado a la izquierda.
Texto alineado al centro.
Texto alineado a la derecha.
Alineación vertical: propiedad ‘vertical-align’
Para alinear verticalmente un texto se usa la propiedad vertical-align. Esta propiedad se puede usar para alinear la caja de un elemento de línea dentro de la caja de su elemento contenedor superior (como una imagen en un texto) y para alinear el contenido de una celda en una tabla.
Valores de elementos de línea:
| Valor | Descripción |
|---|---|
baseline | Alinea la línea de base del elemento con la línea de base de su elemento contenedor superior. Valor por defecto. |
sub | Alinea el elemento como si fuera un subíndice. |
super | Alinea el elemento como si fuera un superíndice. |
text-top | Alinea la parte superior del elemento con la parte superior de la fuente de su elemento contenedor superior. |
text-bottom | Alinea la parte inferior del elemento con la parte inferior de la fuente de su elemento contenedor superior. |
middle | Alinea el centro vertical del elemento con la línea de base del elemento contenedor superior. |
top | Alinea la parte superior del elemento con la parte superior de la línea entera (valor relativo). |
bottom | Alinea la parte inferior del elemento con la parte inferior de la línea entera (valor relativo). |
Sus valores también pueden ser unidades de longitud, permitiendo la introducción de valores negativos. También es posible introducir porcentajes, siendo el 100% la altura de la línea (propiedad line-height). Con el valor inherit se hereda el valor del elemento contenedor superior.
Cuando se trata de tablas, las alineaciones verticales tienen como referencia los límites de la celda contenedora en vez de un elemento contenedor superior (padre). El elemento del interior de la celda que se quiere alinear, se alinea teniendo en cuenta los límites de su zona de relleno (padding).
La propiedad vertical-align puede tener un uso poco claro. Algunos autores han querido alinear bloques de contenido con esta propiedad; pero su utilización está pensada para alinear textos respecto a elementos.
Ejemplos de alineación vertical de texto:
.baseline { vertical-align: baseline; }
.sub { vertical-align: sub; }
.super { vertical-align: super; }
.text-top { vertical-align: text-top; }
.middle { vertical-align: middle; }
.text-bottom { vertical-align: text-bottom; }
Valor
baseline: ★Valor
sub: ★Valor
super: ★Valor
text-top: ★Valor
middle: ★Valor
text-bottom: ★
Ejemplos de alineación vertical en una tabla:
.table-top { vertical-align: top; }
.table-middle { vertical-align: middle; }
.table-bottom { vertical-align: bottom; }
Valor top | Valor middle | Valor bottom |
Decoración del texto: propiedad ‘text-decoration’
Con la propiedad text-decoration se puede decorar el texto: subrayado por debajo, por encima e incluso por el medio (tachado). Sus valores son una serie de palabras clave que se describen a continuación.
| Valor | Descripción |
|---|---|
none | Valor por defecto. Elimina la decoración. |
underline | Texto subrayado por debajo. |
overline | Texto subrayado por arriba. |
line-through | Texto tachado. |
inherit | Hereda del elemento padre. |
Veamos algunos ejemplos:
.under { text-decoration: underline; }
.over { text-decoration: overline; }
.strike { text-decoration: line-through; }
Texto subrayado por debajo.
Texto subrayado por arriba.
Texto tachado.
Transformación del texto: propiedad ‘text-transform’
La transformación del texto se realiza con la propiedad text-transform, y tiene que ver con la conversión de minúsculas a mayúsculas, y viceversa. En la tabla siguiente se muestran sus valores posibles.
| Valor | Descripción |
|---|---|
none | Valor por defecto. Elimina la transformación. |
uppercase | Transforma todas las letras en mayúsculas. |
lowercase | Transforma todas las letras en minúsculas. |
capitalize | Pon en mayúscula la primera letra de cada palabra. |
inherit | Hereda del elemento padre. |
Por ejemplo:
.upper { text-transform: uppercase; }
.lower { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
Texto transformado a mayúsculas.
Texto transformado a minúsculas.
Texto capitalizado en cada palabra.
Sangrado del texto: propiedad ‘text-indent’
El sangrado del texto se establece con la propiedad text-indent. Lo que hace esta propiedad es tabular la primera línea del párrafo en una longitud determinada, por lo que sus valores pueden ser unidades de longitud, porcentajes o la palabra clave inherit para heredar del elemento padre.
A continuación se muestra un sangrado de 20 píxeles:
.sangrado {
text-indent: 20px;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip...
Espacio en blanco: propiedad ‘white-space’
La propiedad white-space permite controlar el tratamiento de los espacios en blanco en un texto. Su valor por defecto (normal) transforma todos los espacios múltiples consecutivos en uno solo. Sin embargo, este comportamiento se puede modificar para conseguir otras opciones.
| Valor | Descripción |
|---|---|
normal | No preserva espacios consecutivos ni saltos de línea, y el texto se ajusta al elemento contenedor. Valor por defecto. |
pre | Preserva espacios consecutivos y saltos de línea, pero el texto no se ajusta al elemento contenedor. |
nowrap | No preserva espacios consecutivos ni saltos de línea, y el texto no se ajusta al elemento contenedor. |
pre-wrap | Preserva espacios consecutivos y saltos de línea, y se ajusta al elemento contenedor. |
pre-line | No preserva espacios consecutivos, preserva saltos de línea, y se ajusta al elemento contenedor. |
inherit | Hereda del elemento padre. |
Desbordamiento de texto: propiedad ‘text-overflow’
La propiedad text-overflow permite señalar al usuario que hay contenido desbordado que no se está mostrando. Es importante indicar que esta propiedad no sirve para forzar que el texto desborde de la caja: para forzar el desborde del texto hay que usar otras propiedades. Son las siguientes:
.desborde {
overflow: hidden;
white-space: nowrap;
}
| Valor | Descripción |
|---|---|
clip | El texto es cortado en seco, sin indicativo de ello. |
ellipsis | El corte del texto se produce de forma automática. |
Con el valor clip, el texto se quedará cortado en el límite de la zona de contenido del elemento. No se hace ningún indicativo del corte, más allá de que se verá un texto inacabado. Es el valor predeterminado de esta propiedad.
El valor ellipsis produce un corte de forma automática y añade los famosos tres puntos suspensivos (…, carácter Unicode U+2026) al final. Estos puntos suspensivos se muestran dentro de la zona de contenido.
.ellipsis {
text-overflow: ellipsis;
}
Resultado:
