Propriété CSS line-clamp
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Want more support for this feature? Tell us why.
La propriété CSS line-clamp permet de limiter le contenu d'un bloc au nombre de lignes indiqué.
Note :
Pour la compatibilité avec les anciennes versions, la propriété préfixée par le fournisseur -webkit-line-clamp ne fonctionne qu'en combinaison avec la propriété display définie à -webkit-box ou -webkit-inline-box et la propriété -webkit-box-orient définie à vertical. Bien que ces propriétés préfixées soient obsolètes, la co-dépendance de ces trois propriétés est un comportement entièrement défini et continuera d'être pris en charge.
Dans la plupart des cas, vous voudrez également définir overflow à hidden, sinon le contenu ne sera pas rogné mais une ellipse sera tout de même affichée après le nombre de lignes indiqué.
Lorsqu'elle est appliquée à des éléments d'ancrage, la troncature peut se produire au milieu du texte, pas nécessairement à la fin.
Syntaxe
/* Valeurs avec un mot-clé */
line-clamp: none;
/* Valeurs de type <integer> */
line-clamp: 3;
line-clamp: 10;
/* Valeurs globales */
line-clamp: inherit;
line-clamp: initial;
line-clamp: revert;
line-clamp: revert-layer;
line-clamp: unset;
Valeurs
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | Conteneurs de type bloc, sauf les conteneurs multi-colonnes |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | un entier |
Syntaxe formelle
line-clamp =
none |
[ <integer [1,∞]> || <'block-ellipsis'> ] -webkit-legacy?
<integer> =
<number-token>
<block-ellipsis> =
no-ellipsis |
auto |
<string>
Exemples
Tronquer un paragraphe
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
à n lignes de l'endroit où le texte est tronqué.
</p>
CSS
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Overflow Module Level 4 # propdef-line-clamp |
Compatibilité des navigateurs
Voir aussi
- Limiter le texte sur plusieurs lignes (angl.) sur CSS-Tricks