Cortar el texto en CSS

Una línea es una técnica distinta de tres líneas, y ambas necesitan un ancho contra el cual trabajar.

.one-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-inline-size: 0;
}

.three-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.url { overflow-wrap: anywhere; hyphens: auto; }
.balanced { text-wrap: balance; }
.pretty { text-wrap: pretty; }

Cómo funciona

text-overflow: ellipsis necesita nowrap y un overflow que no sea visible.
line-clamp maneja varias líneas y no necesita un alto fijo.
overflow-wrap: anywhere es la salida de emergencia para una URL indivisible.

Palabras clave y builtins usados aquí

display
hyphens
overflow

El intento, en números

Líneas: 17
Caracteres a escribir: 323
Tokens: 71
Ritmo de tres estrellas: 90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 47 segundos.

Escribe este fragmento

Paso 1 de 3 en Texto y scroll; paso 7 de 13 en Dar estilo a componentes.

← Anterior Siguiente →