Texto CSS

Las propiedades de texto en CSS no describen la tipografía en sí — eso lo hacen las propiedades de fuente — sino cómo el texto se distribuye y presenta dentro del espacio disponible. Operan sobre el contenido ya renderizado: deciden si las líneas se separan con generosidad o apriete, si el texto se alinea a la izquierda o al centro, si las palabras se truncan con … cuando no caben, o si los espacios en blanco del HTML se preservan o colapsan.

La distinción conceptual entre fuente y texto es útil porque apunta a responsabilidades distintas en un sistema de diseño. Las propiedades de fuente se configuran globalmente y raramente cambian por componente; las de texto son mucho más contextuales. Un párrafo de cuerpo, un título, una celda de tabla y un badge tienen el mismo font-family, pero pueden diferir completamente en text-align, line-height y text-overflow.

Las siete propiedades de este subgrupo se heredan de padre a hijo, igual que las de fuente. Eso significa que si fijás line-height: 1.5 en el body, todos los párrafos del documento heredan ese interlineado sin necesidad de redeclararlo. Cuando lo sobreescribís en un elemento específico, creás una excepción local sobre la base heredada.

Cómo funciona

line-height — el interlineado

line-height controla la altura de cada línea de texto y es la propiedad con mayor impacto en la legibilidad. El valor recomendado es un número sin unidad (1.5, 1.6): al heredarse, ese factor se multiplica por el font-size de cada elemento, en vez de heredar un valor absoluto fijo que podría quedar desproporcionado si el tamaño varía. Para cuerpo de texto, el rango 1.4–1.6 es el estándar; para títulos grandes, 1.1–1.2 suele ser suficiente.

text-align — la alineación horizontal

text-align alinea el contenido inline dentro de su caja de bloque: left, right, center o justify. Solo afecta al texto y otros elementos inline — no desplaza el elemento contenedor en el layout. justify distribuye el espacio extra entre palabras para que el bloque forme un rectángulo; funciona bien con texto largo pero puede crear ríos de espacio en párrafos cortos o con palabras largas.

text-decoration — la decoración visual

text-decoration agrega líneas al texto: underline (subrayado, el default de los enlaces), overline (línea sobre el texto), line-through (tachado). Es el shorthand de text-decoration-line, text-decoration-color, text-decoration-style y text-decoration-thickness. El uso más frecuente en la práctica es quitar el subrayado de los enlaces con text-decoration: none y reemplazarlo con un efecto personalizado.

text-transform — la transformación de mayúsculas

text-transform transforma visualmente las mayúsculas sin tocar el HTML: uppercase (todo en mayúsculas), lowercase (todo en minúsculas), capitalize (primera letra de cada palabra en mayúscula). La transformación es puramente visual — el texto en el DOM no cambia, lo que es importante para accesibilidad y para copiar/pegar. Usalo en CSS, nunca en el HTML: si el diseño cambia, cambiás una línea de CSS en vez de revisar todo el markup.

letter-spacing — el espaciado entre caracteres

letter-spacing agrega (o reduce, con valor negativo) espacio uniforme entre los caracteres de un texto. Es lo que en tipografía se llama tracking. Los valores más comunes son positivos y pequeños (0.05em–0.1em), usados en texto en mayúsculas o en títulos pequeños donde el tracking mejora la legibilidad. Un valor negativo aprieta los caracteres — útil solo en casos muy específicos de display.

white-space — el tratamiento de espacios

white-space controla cómo el navegador interpreta los espacios en blanco y los saltos de línea del HTML. El comportamiento por defecto (normal) colapsa los espacios consecutivos a uno y rompe las líneas según el ancho del contenedor. Los valores más importantes:

• nowrap — el texto no rompe línea nunca (útil para badges, etiquetas, celdas de tabla).
• pre — preserva espacios y saltos de línea exactamente como están en el HTML.
• pre-wrap — preserva espacios y saltos, pero sí rompe según el ancho del contenedor.
• pre-line — colapsa espacios pero preserva los saltos de línea explícitos.

text-overflow — el desbordamiento de texto

text-overflow define qué pasa visualmente cuando el texto desborda su contenedor. El valor ellipsis muestra … al final del texto recortado — la señal visual que indica al usuario que el contenido continúa. Para que funcione, el contenedor necesita tres propiedades juntas: overflow: hidden (recorta el contenido), white-space: nowrap (evita que el texto rompa a la línea siguiente) y text-overflow: ellipsis (agrega el indicador visual).

Resultado

/* Truncar texto en una línea */
.tarjeta-titulo {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Etiqueta en mayúsculas con tracking */
.badge {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Párrafo de cuerpo legible */
p {
  line-height: 1.6;
  text-align: left;
}

El patrón de truncado (overflow: hidden + white-space: nowrap + text-overflow: ellipsis) es uno de los más frecuentes en interfaces reales: aparece en títulos de tarjetas, celdas de tabla y cualquier lugar donde el texto puede ser más largo que el espacio disponible. Los tres tienen que estar juntos — ninguno funciona por separado para este efecto.

Ver también

Las propiedades de texto trabajan en conjunto con las propiedades de fuente: la fuente define la tipografía, el texto controla cómo fluye. La página Tipografía y texto CSS da el mapa completo de las dos familias y las decisiones de cuándo usar cada propiedad.