-webkit-line-clamp
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
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é | Block containers except multi-column containers |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | un entier |
Syntaxe formelle
line-clamp =
none |
[ <integer [1,∞]> || <'block-ellipsis'> ] -webkit-legacy?
<block-ellipsis> =
no-ellipsis |
auto |
<string>
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
Chargement…