`Line-clamp` - Propriété CSS

line-clamp

Résumé des caractéristiques de la propriété `line-clamp`

Description rapide

Définit le nombre de lignes qui seront affichées dans un élément. La présence de texte excédentaire est indiquée par un caractère de suite.

Statut

Problèmes de compatibilité ⚠

Utilisable sur

HTML

Valeurs prédéfinies

none

Pourcentages

Ne s'appliquent pas.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété line-clamp passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Débordements

Références (W3C)

CSS Overflow Module Level 4

Statut du document: WD (document de travail)

Schéma de la syntaxe de `line-clamp`.

Schéma syntaxique de la propriété line-clamp.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description des termes utilisés sur le schéma :

integer est une valeur numérique entière, supérieure ou égale à 1.

Description de la propriété `line-clamp`.

⚠

La propriété est encore peu reconnue par les grands navigateurs actuels (2025).

line-clamp limite le nombre de lignes affichées dans un élément. Cela fonctionne même pour les éléments dont la hauteur n'est pas fixée, contrairement à overflow.

Un caractère de suite est affiché après la partie visible du texte (en général le caractère U2026 …). Si la propriété text-overflow a été utilisée sur cet élément, pour changer le caractère de suite, c'est bien sûr le nouveau caractère qui est utilisé.

Valeurs pour `line-clamp`.

line-clamp: none;

Le contenu est affiché dans son intégralité, sauf si la propriété overflow est positionnée sur une autre valeur que visible.

Ce texte, assez long, déborde de son élément. Le propriété line-clamp positionnée sur none ne limite pas le nombre de lignes.
line-clamp: 3;

Un nombre entier supérieur à 0 : c'est le nombre de ligne qui sera conservée.
En augmentant la taille de l'élément ci-dessous, vous pourrez faire apparaître tout le texte. ⚠ N'oubliez pas que cela ne marche que sur Chrome et Edge .

Ce texte, assez long, déborde de son élément. Le propriété line-clamp limite ici le nombre de lignes à 3.
line-clamp: initial; (none) line-clamp: inherit; line-clamp: revert; line-clamp: revertLayer; line-clamp: unset;

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de `line-clamp`.

L'animation de la propriété line-clamp est assez bizarre. On s'attendrait à un affichage progressif, depuis une ligne jusqu'à cinq ligne. Mais l'exemple montre plutôt une animation brutale, qui passe de une ligne à cinq lignes d'un coup.

La limite du nombre de ligne évolue entre 1 et 5. ce texte est donc tronquée plus ou moins suivant l'étape de l'animation.

Exemple interactif avec la propriété `line-clamp`.

Le simulateur permet de changer la valeur de line-clamp. On constate que la dimension du cadre évolue en fonction (elle n'a pas été fixée).

line-clamp :

none

-webkit-line-clamp :

none

Ceci est un élément dont le contenu déborde la place disponible. La propriété line-clamp permet de choisir le nombre de lignes qui seront affichées.

Compatibilité des navigateurs avec `line-clamp`.

Colonne 1

Support par les navigateurs de la propriété line-clamp qui limite le nombre de lignes affichées.

Remarques :

(1) Propriété reconnue avec le préfixe -webkit- mais cependant fonctinnement incorrect.

Propriété
line-clamp

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Safari

Safari sur IOS

Samsung Internet

Chrome

Firefox

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `line-clamp`.

Module CSS - Débordements - Niveau 4

Présentation de la propriété line-clamp qui devrait être une propriété raccourcie.

13 Juin 2017
Document de travail.

Voir aussi, au sujet des dépassements.

Les dépassements de contenu (texte ou image) sont fréquents. Tout ce qui les concerne est regroupé dans le module CSS Overflow Module. Vous y trouvez notamment les propriétés et sélecteurs suivants :