Propiedad CSS block-overflow

La propiedad block-overflow controla qué ocurre en el punto donde un contenedor de bloque es truncado en la dirección de bloque (verticalmente, en modos de escritura horizontal). En lugar de simplemente cortar el texto, permite marcar el punto de truncamiento con puntos suspensivos (…) o una cadena personalizada, indicando al lector que hay más contenido a continuación.

Forma parte del CSS Overflow Module Level 4 y es la contraparte multilínea de text-overflow: mientras que text-overflow: ellipsis trunca una sola línea en la dirección inline, block-overflow controla el marcador que se muestra cuando el contenido se trunca en varias líneas (por ejemplo, mediante max-lines o line-clamp).

block-overflow solo tiene efecto en un punto de truncamiento forzado — por ejemplo, la última línea visible permitida por max-lines, o el cuadro de línea inmediatamente antes de un salto de región. Por sí sola, no limita cuántas líneas se muestran; combínala con max-lines para eso.

Sintaxis

block-overflow: clip | ellipsis | <string>;

El valor es una palabra clave simple (clip o ellipsis) o una <string> entre comillas.

Truncar múltiples líneas

block-overflow está diseñado para funcionar junto con max-lines, que limita el número de líneas, y la propiedad continue, que marca el cuadro como truncable. El ejemplo siguiente limita la descripción de una tarjeta a tres líneas y muestra puntos suspensivos en la tercera:

.card-description {
  max-lines: 3;            /* keep only the first three lines      */
  continue: discard;       /* truncate the rest                    */
  block-overflow: ellipsis; /* show … at the truncation point      */
}

<p class="card-description">
  This description is long enough to wrap onto many lines. Only the
  first three are kept, and the third ends with an ellipsis so the
  reader knows the text continues beyond what is shown here.
</p>

Como ningún navegador admite aún este conjunto de propiedades, el equivalente práctico que funciona en producción es line-clamp:

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

Relación con line-clamp

La propiedad line-clamp es una abreviatura que establece max-lines, block-overflow y continue a la vez. Escribir line-clamp: 3 implica block-overflow: ellipsis y limita el bloque a tres líneas, por lo que raramente se establece block-overflow directamente — se deja que line-clamp lo configure automáticamente.

Valores

Una cadena personalizada reemplaza los puntos suspensivos predeterminados. Esto es útil para marcadores de truncamiento localizados o de marca como "… leer más":

.custom-ellipsis {
  block-overflow: "… read more";
}

block-overflow vs. text-overflow

Estas dos propiedades resuelven problemas relacionados en ejes diferentes y es fácil confundirlas:

Si necesitas un título de una línea que termine en puntos suspensivos, usa text-overflow. Si necesitas un extracto multilínea que termine en puntos suspensivos, usa line-clamp hoy (y block-overflow cuando los navegadores lo admitan).

Práctica