Propriété CSS block-overflow

La propriété block-overflow contrôle la manière dont le contenu est tronqué lorsqu'il déborde d'un conteneur de bloc, en insérant éventuellement des points de suspension ou une chaîne de caractères personnalisée pour indiquer qu'il reste du contenu.

WARNING

Si la boîte ne contient aucun bloc de ligne immédiatement précédant une rupture de région, alors la propriété block-overflow ne fonctionne pas. (Une rupture de région se produit lorsque le contenu s'écoule dans une région CSS ou une mise en page multi-colonnes.)

Valeur initiale	clip
S'applique à	Conteneurs de bloc.
Héritée	Non.
Animable	Non.
Version	Module CSS Overflow Level 4
Syntaxe DOM	object.style.blockOverflow = "ellipsis";

Syntaxe

Syntaxe de la propriété CSS block-overflow

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

Exemple pratique

Exemple de la propriété 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>

Relation avec line-clamp

La propriété CSS line-clamp est un raccourci pour overflow-block et max-lines. Elle implique block-overflow: ellipsis et limite le texte à un nombre spécifique de lignes.

Valeurs

Valeur	Description
clip	Le contenu est tronqué au bord de la boîte.
ellipsis	Affiche des points de suspension (...) à la fin de la dernière ligne. Il s'affiche sous forme de caractère Unicode (U+2026) mais pourrait être remplacé par un équivalent basé sur la langue du contenu et le mode d'écriture de l'agent utilisateur utilisé.
<string>	Affiche la chaîne spécifiée comme points de suspension de débordement de bloc à la fin de la dernière ligne. Le navigateur peut tronquer la chaîne si elle est extrêmement longue.

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

Pratique

Comment la propriété CSS overflow est-elle utilisée ?

Elle aide à maintenir le contenu à l'intérieur du modèle de boîte choisi.Elle est utilisée pour empêcher le débordement du contenu.Elle est appliquée lorsque le contenu est trop grand pour tenir dans la zone délimitée.Elle n'a aucun effet sur l'affichage du contenu.Elle peut masquer le contenu en débordement ou l'afficher avec une barre de défilement si nécessaire.