Propriété CSS block-overflow

La propriété block-overflow contrôle ce qui se passe à l'endroit où un conteneur de bloc est tronqué dans la direction de bloc (verticalement, dans les modes d'écriture horizontaux). Au lieu de simplement couper le texte, elle permet de marquer le point de troncature avec des points de suspension (…) ou une chaîne personnalisée, signalant au lecteur que d'autres contenus suivent.

Elle fait partie du CSS Overflow Module Level 4 et est l'équivalent multi-lignes de text-overflow : là où text-overflow: ellipsis tronque une seule ligne dans la direction inline, block-overflow contrôle le marqueur affiché lorsque le contenu est tronqué sur plusieurs lignes (par exemple par max-lines ou line-clamp).

block-overflow ne prend effet qu'à un point de troncature forcé — par exemple la dernière ligne visible autorisée par max-lines, ou la boîte de ligne immédiatement avant une rupture de région. Elle ne limite pas à elle seule le nombre de lignes affichées ; associez-la à max-lines pour cela.

Syntaxe

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

La valeur est un mot-clé unique (clip ou ellipsis) ou une <string> entre guillemets.

Tronquer plusieurs lignes

block-overflow est conçue pour fonctionner conjointement avec max-lines, qui limite le nombre de lignes, et la propriété continue, qui marque la boîte comme tronquable. L'exemple ci-dessous limite la description d'une carte à trois lignes et affiche des points de suspension à la troisième :

.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>

Comme aucun navigateur ne prend encore en charge cette combinaison, l'équivalent pratique qui fonctionne en production est line-clamp :

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

Relation avec line-clamp

La propriété line-clamp est un raccourci qui définit max-lines, block-overflow et continue en une seule fois. Écrire line-clamp: 3 implique block-overflow: ellipsis et limite le bloc à trois lignes, de sorte que vous définissez rarement block-overflow directement — vous laissez line-clamp le faire à votre place.

Valeurs

Une chaîne personnalisée remplace les points de suspension par défaut. Cela est utile pour des marqueurs de troncature localisés ou de marque tels que "… lire la suite" :

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

block-overflow vs. text-overflow

Ces deux propriétés résolvent des problèmes liés sur des axes différents, et il est facile de les confondre :

Si vous avez besoin d'un titre sur une seule ligne se terminant par des points de suspension, utilisez text-overflow. Si vous avez besoin d'un extrait multi-lignes se terminant par des points de suspension, utilisez line-clamp aujourd'hui (et block-overflow dès que les navigateurs le prendront en charge).

Entraînement