Pince de ligne - Astuces CSS | CSS Almanach 2025

La line-clamppropriété tronque le texte à un nombre spécifique de lignes.

La spécification pour cela est actuellement un brouillon de l'éditeur, ce qui signifie que rien ici n'est gravé dans la pierre car c'est un travail en cours. Cela dit, il est défini comme un raccourci pour max-lineset block-overflow, dont le premier est noté comme risquant d'être supprimé dans la recommandation candidate.

Il est facile de voir comment max-linescela serait annulé puisque sa fonction (définir le nombre de lignes avant la troncature) est déjà intégrée line-clampet toute autre abstraction pourrait être inutile. Mais cela nous fait dérailler, alors passons à autre chose.

Syntaxe

.module ( line-clamp: (none | ); )

line-clamp accepte les valeurs suivantes dans le brouillon actuel de la spécification:

none: ne fixe aucun maximum sur le nombre de lignes et aucune troncature ne se produira en conséquence.
: définit le nombre maximum de lignes avant de tronquer le contenu puis affiche une ellipse (…) à la fin de la dernière ligne.

Ces points de suspension devraient s'afficher sous la forme d'un caractère Unicode (U + 2026) mais pourraient être remplacés par un équivalent basé sur la langue du contenu et le mode d'écriture de l'agent utilisateur utilisé.

Hé, je ne peux pas faire ça avec le dépassement de texte?

Bonne question, mon ami, et la réponse est, eh bien…

(Regarde ce que j'ai fait là?)

… Sorta.

text-overflowa en effet une ellipsisvaleur qui tronquera le texte:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

Voir le débordement de texte Pen par Geoff Graham (@geoffgraham) sur CodePen.

Bien sympa, c'est un bon début. Mais que se passe-t-il si nous voulons introduire les points de suspension non pas sur la première ligne mais quelque part, disons, sur la troisième ligne de texte?

C'est là line-clampqu'entre en jeu. Notez simplement qu'une combinaison de trois propriétés est utilisée pour y parvenir:

.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )

Voir le Pen line-clamp (-webkit) de Geoff Graham (@geoffgraham) sur CodePen.

Firefox prend en charge cela maintenant, exactement de cette façon (avec les -webkit-préfixes et tout).

Alors, quel est le piège?

À partir de maintenant, c'est le support du navigateur. Les pinces de ligne font partie du module CSS Overflow Level 3 qui est actuellement dans le brouillon de l'éditeur et totalement non pris en charge pour le moment.

Nous pouvons obtenir une action de serrage de ligne avec un -webkit-préfixe (qui, assez bizarrement, fonctionne sur tous les principaux navigateurs). En fait, c'est ainsi que la démo ci-dessus a été réalisée.

Nous pourrions emprunter le chemin JavaScript si nous le souhaitons. Clamp.js fera l'affaire:

Voir le Pen line-clamp (clamp.js) de Geoff Graham (@geoffgraham) sur CodePen.

Prise en charge du navigateur

Il s'agit du support de la propriété exclusive de WebKit et de l'implémentation non documentée de la pince de ligne.

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.