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 initiale | none |
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Média | visuel |
Valeur calculée | comme spécifié |
Type d'animation | by computed value type |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
-webkit-line-clamp | Chrome Support complet 6 | Edge Support complet 17 | Firefox Support complet 68 | IE Aucun support Non | Opera Support complet 15 | Safari Support complet 5 | WebView Android Support complet ≤37 | Chrome Android Support complet 18 | Firefox Android Support complet 68 | Opera Android Support complet 14 | Safari iOS Support complet 4.2 | Samsung Internet Android Support complet 4.0 |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support