Estilizar texto en CSS

Alineación, mayúsculas, decoración y qué pasa con las líneas largas.

.lede {
  font-size: 1.125rem;
  text-align: start;
  max-width: 60ch;
}

.link {
  text-decoration: underline;
  text-decoration-color: #7c5cff;
  text-underline-offset: 0.2em;
}

.filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Cómo funciona

1. text-decoration acepta color, estilo y grosor propios.
2. text-overflow: ellipsis necesita además overflow y nowrap.
3. hyphens y overflow-wrap evitan que los tokens largos se desborden.

Palabras clave y builtins usados aquí

• ch
• em
• overflow
• rem

El intento, en números

Líneas

17

Caracteres a escribir

246

Tokens

51

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 41 segundos.

Escribe este fragmento

Paso 4 de 4 en Color y tipografía; paso 13 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →