La block-overflowpropriété tronque le texte et indique que plus de contenu suit en insérant des points de suspension ou une chaîne personnalisée après un nombre de lignes défini par la max-linespropriété.
La propriété a été introduite dans le brouillon de l'éditeur de la spécification CSS Overflow Module Level 3. Cela signifie que c'est expérimental pour le moment et considéré comme un travail en cours. En fait, vous pouvez suivre la conversation qui comprend des discussions sur le changement de nom de la propriété.
Syntaxe
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow accepte les valeurs suivantes:
clip: N'insère pas de caractère pour indiquer plus de texte à suivre. Au lieu de cela, le contenu est simplement tronqué et coupé au dernier caractère.ellipsis: Affiche des points de suspension (…) à la fin de la dernière ligne. Il doit s'afficher sous la forme d'un 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é.: Affiche un texte personnalisé (par exemple «Lire la suite →») à la fin de la dernière ligne. La spécification dit que le User-Agent peut remplacer la chaîne par des points de suspension si la chaîne est "absurdement" longue.
Encore une fois, tout cela est un travail expérimental en cours. Ces valeurs pourraient changer. Ou, plus pourrait être ajouté. Par exemple, il y a eu des appels pour une ellipse «plus intelligente» qui pourrait être capable de faire plus de choses, comme recadrer du texte au milieu:
One thing led to another and… yada yada yada, that was that.Utiliser line-clamppour faire court
Nous pouvons obtenir à peu près la même chose en utilisant un line-clampraccourci pour les propriétés block-overflowet max-lines.
Tel qu'il est actuellement défini, cependant, line-clampn'accepte qu'une seule valeur numérique max-lineset définit implicitement block-overflowla ellipsisvaleur. Donc, si vous souhaitez utiliser une chaîne personnalisée pour la troncature, vous devez utiliser la forme longue à la place.
Prise en charge du navigateur
Aucun pour le moment, mais vous pouvez obtenir de l'aide en utilisant l'implémentation propriétaire de WebKit de line-clamp:
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Non | 17 | 5 * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5,0-5,1 * |