Propiedad CSS block-overflow

La propiedad block-overflow controla cómo se recorta el contenido cuando desborda un contenedor de bloque, insertando opcionalmente una elipsis o una cadena personalizada para indicar que sigue más contenido.

WARNING

Si el cuadro no contiene ningún bloque de línea inmediatamente antes de un salto de región, entonces la propiedad block-overflow no funciona. (Un salto de región ocurre cuando el contenido fluye hacia una región CSS o un diseño multicolumna.)

Initial Value	clip
Applies to	Contenedores de bloque.
Inherited	No.
Animatable	No.
Version	CSS Overflow Module Level 4
DOM Syntax	object.style.blockOverflow = "ellipsis";

Sintaxis

Sintaxis de la propiedad CSS block-overflow

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

Ejemplo práctico

Ejemplo de la propiedad CSS block-overflow

.module {
  block-overflow: ellipsis;
}

<div class="module">
  <p>This is a long paragraph that will be clipped at the container's edge, with an ellipsis added to indicate more content follows.</p>
</div>

Relación con line-clamp

La propiedad CSS line-clamp es una abreviatura de overflow-block y max-lines. Implica block-overflow: ellipsis y limita el texto a un número específico de líneas.

Valores

Value	Description
clip	El contenido se recorta en el borde de la caja.
ellipsis	Muestra una elipsis (...) al final de la última línea. Se representa como un carácter Unicode (U+2026), pero podría cambiarse por uno equivalente según el idioma del contenido y el modo de escritura del agente de usuario que se esté usando.
<string>	Representa la cadena especificada como la elipsis de desbordamiento de bloque al final de la última línea. El navegador puede truncar la cadena si es extremadamente larga.

.custom-ellipsis {
  block-overflow: "...";
}

Practice

How is CSS overflow property used?

It helps keep the content inside the chosen box model.It is used to prevent the overflow of content.It is applied when the content is too large to fit in the outlined area.It doesn't have any effect on the display of content.It can hide the overflowed content or display it as a scroll if necessary.