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 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é | 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?
<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
| Specification |
|---|
| CSS Overflow Module Level 4 # propdef-line-clamp |
Compatibilité des navigateurs
Voir aussi
- Limiter le texte sur plusieurs lignes (angl.) sur CSS-Tricks