Introducción
1
Alineación, decoración, mayúsculas, sombras y cómo se parten las líneas.
2
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Referencia de CSS
03
Texto y párrafos
Alineación, decoración, mayúsculas, sombras y cómo se parten las líneas.
Código del tema: .texto { text-align: center; }
📘 Teoría
text-align
1
Esencial. La alineación horizontal del texto dentro de su caja. Para textos largos, mejor a la izquierda: justificado crea huecos.
2
Valores: left, right, center, justify, start, end
text-align-last
1
La alineación de la última línea (útil con justify).
2
Valores: auto, left, center, right, justify
text-indent
1
La sangría de la primera línea del párrafo.
2
Valores: 1.5em, 2rem, -1em (sangría francesa)
text-transform
1
Esencial. Pasa el texto a mayúsculas, minúsculas o capitaliza cada palabra, sin cambiar el HTML.
2
Valores: uppercase, lowercase, capitalize, none
text-decoration
Esencial. Líneas sobre el texto: subrayado, tachado, línea superior. Abrevia tipo (text-decoration-line), color (-color), estilo (-style) y grosor (-thickness). Con none se quita el subrayado de un enlace.
Valores: none, underline, line-through, underline wavy #e63946 2px
text-underline-offset
1
La distancia entre el texto y su subrayado.
2
Valores: auto, 0.25em, 4px
text-underline-position
1
Dónde va el subrayado: bajo la línea base o bajo las letras con descendentes.
2
Valores: auto, under, from-font
text-shadow
1
Esencial. Sombra del texto: desplazamiento horizontal, vertical, desenfoque y color. Se pueden poner varias.
2
Valores: 2px 2px 4px rgb(0 0 0 / 40%), none
text-overflow
1
Qué se muestra cuando el texto no cabe en una línea: con ellipsis, unos puntos suspensivos. Necesita overflow: hidden y white-space: nowrap.
2
Valores: clip, ellipsis
text-wrap
1
Cómo se reparten las palabras entre líneas. balance iguala la longitud de las líneas de un titular; pretty evita que la última línea de un párrafo se quede con una sola palabra.
2
Valores: wrap, nowrap, balance, pretty
white-space
1
Si se respetan los espacios y saltos de línea del HTML y si el texto puede partirse.
2
Valores: normal, nowrap, pre, pre-wrap, pre-line
word-break
1
Si una palabra puede partirse en cualquier letra para que quepa.
2
Valores: normal, break-all, keep-all
overflow-wrap
1
Permite partir una palabra demasiado larga (una URL, por ejemplo) solo si no cabe de otra forma.
2
Valores: normal, break-word, anywhere
hyphens
1
Guiones de partición automáticos. Necesita el idioma en lang.
2
Valores: none, manual, auto
vertical-align
1
La alineación vertical de un elemento en línea (una imagen, un icono) respecto a la línea de texto, o el contenido de una celda de tabla.
2
Valores: baseline, middle, top, bottom, text-top, sub, super
tab-size
1
El ancho de un tabulador en texto preformateado.
2
Valores: 8 (por defecto), 2, 4
-webkit-line-clamp
1
Corta un texto en un número de líneas y pone puntos suspensivos. Pese al prefijo, funciona en todos los navegadores (con display: -webkit-box).
2
Valores: 2, 3, none
quotes
1
Las comillas que usan <q> y content: open-quote.
2
Valores: auto, "«" "»", none
text-emphasis
1
Marcas de énfasis sobre cada letra (puntos, círculos), propias de la escritura de Asia oriental.
2
Valores: filled circle #e63946, "*"