-webkit-line-clamp

La propriété CSS -webkit-line-clamp permet de limiter l'affichage du contenu d'un bloc à un nombre donné de lignes.

Cette propriété fonctionne uniquement si display vaut -webkit-box ou -webkit-inline-box et si -webkit-box-orient vaut vertical.

Dans la plupart des cas, on utilisera également overflow avec la valeur hidden, afin de masquer le contenu qui dépasse (plutôt que d'afficher une ellipse en dehors de la boîte).

Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au milieu du texte (et pas nécessairement à la fin).

Note : Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification CSS Overflow Module Level 3 définit également une propriété line-clamp qui doit remplacer -webkit-line-clamp.

Syntaxe

/* Valeurs avec un mot-clé */
-webkit-line-clamp: none;

/* Valeurs entières */
/* Type <integer> */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* Valeurs globales */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;
none
Cette valeur indique que le contenu ne sera pas rogné.
integer
Cette valeur indique le nombre de lignes après lequel tronquer le contenu. Cette valeur doit être supérieure à 0.

Exemples

HTML

<p>
  Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, ce qui signifie que le texte sera rogné après trois lignes.
  Une ellipse sera affichée au n ellipsis will be shown at the point where the text is clamped.
</p>

CSS

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Overflow Module Level 3
La définition de '-webkit-line-clamp' dans cette spécification.
Version de travail Définition initiale.
Valeur initialenone
Applicabilitétous les éléments
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationby computed value type
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
-webkit-line-clampChrome Support complet 6Edge Support complet 17Firefox Support complet 68IE Aucun support NonOpera Support complet 15Safari Support complet 5WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 68Opera Android Support complet 14Safari iOS Support complet 4.2Samsung Internet Android Support complet 4.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi