-webkit-line-clamp
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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;
Définition formelle
Valeur initiale | none |
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | by computed value type |
Syntaxe formelle
-webkit-line-clamp =
none |
<integer [1,∞]>
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
Specification |
---|
CSS Overflow Module Level 4 # propdef-line-clamp |
Compatibilité des navigateurs
BCD tables only load in the browser