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.
Vous voulez une meilleure prise en charge pour cette fonctionnalité ? Dites-nous pourquoi.
La propriété CSS line-clamp permet de limiter le contenu d'un bloc au nombre de lignes indiqué. Optionnellement, elle permet également d'insérer du contenu dans la dernière ligne pour indiquer que le contenu a été tronqué.
Syntaxe
/* Valeurs avec un mot-clé */
line-clamp: none;
/* Valeurs de type <integer> seulement */
line-clamp: 3;
line-clamp: 10;
/* Valeurs de type <integer> et <'block-ellipsis'> */
line-clamp: 3 no-ellipsis;
line-clamp: 10 "… (il y a du contenu supplémentaire)";
/* Valeurs de type <'block-ellipsis'> seulement */
line-clamp: no-ellipsis;
line-clamp: "… (il y a du contenu supplémentaire)";
/* Valeurs globales */
line-clamp: inherit;
line-clamp: initial;
line-clamp: revert;
line-clamp: revert-layer;
line-clamp: unset;
Valeurs
Cette propriété est définie avec une ou deux valeurs séparées par des espaces parmi la liste suivante :
none-
Définit que le contenu n'est pas tronqué. Ce mot-clé ne peut pas être combiné avec les autres valeurs. C'est la valeur par défaut.
<integer>Facultatif-
Définit le nombre de lignes après lesquelles le contenu est tronqué. Il doit être supérieur à 0.
<'block-ellipsis'>Facultatif-
Définit le contenu inséré dans la dernière ligne. Elle peut prendre l'une des valeurs suivantes :
no-ellipsis: Aucune ellipse (caractère U+2026) n'est ajoutée si le texte est tronqué en raison du nombre de lignes défini.auto: Affiche un caractère d'ellipse (U+2026) si le texte est tronqué.<string>: Affiche la chaîne de caractères définie à la fin de la ligne affectée. Les navigateurs peuvent tronquer cette chaîne de caractères si elle est très longue. Une chaîne de caractères vide se comporte comme la valeurno-ellipsis.
Note :
Si <'block-ellipsis'> est défini sans un <integer>, il s'applique uniquement lorsque le contenu est tronqué en raison de la hauteur du conteneur.
Description
Dans la plupart des cas, vous voulez également définir overflow à hidden, sinon le contenu n'est pas rogné mais une ellipse est 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.
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 continue d'être pris en charge.
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 |
[ <'max-lines'> || <'block-ellipsis'> ] -webkit-legacy?
<max-lines> =
auto ||
<integer [1,∞]>
<block-ellipsis> =
no-ellipsis |
ellipsis |
<string>
<integer> =
<number-token>
Exemples
Tronquer le contenu avec une ellipse ou une chaîne de caractères personnalisée
Dans cet exemple, il y a trois cartes, chacune avec une valeur différente de line-clamp :
- La première ne possède qu'un
<integer>pour restreindre le nombre de lignes. - La deuxième possède un
<integer>et la valeurno-ellipsis. - La troisième possède un
<integer>et une<string>personnalisée.
HTML
<section>
<div class="carte">
<h2>nombre de lignes</h2>
<p class="entier">
Dans cette carte, le <em>nombre de lignes</em> est défini par un entier
(<code><integer></code>). Tout contenu qui ne rentre pas est tronqué
et une ellipse est affichée.
</p>
</div>
<div class="carte">
<h2>pas d'ellipse</h2>
<p class="aucune-ellipse">
Dans cette carte, un <code><integer></code> et une valeur
<em>no-ellipsis</em> sont définis. Tout contenu qui ne rentre pas est
tronqué et aucune ellipse n'est affichée.
</p>
</div>
<div class="carte">
<h2>chaîne de caractères personnalisée</h2>
<p class="chaine-de-caracteres">
Dans cette carte, un <code><integer></code> et une valeur
<em>string</em>
sont définis. Tout contenu qui ne rentre pas est tronqué et la chaîne de
caractères personnalisée est affichée à la place d'une ellipse.
</p>
</div>
</section>
CSS
.entier {
line-clamp: 2;
overflow: hidden;
}
.aucune-ellipse {
line-clamp: 2 no-ellipsis;
overflow: hidden;
}
.chaine-de-caracteres {
line-clamp: 2 "… (mon texte personnalisé)";
overflow: hidden;
}
Résultat
Tronquer un paragraphe avec la propriété héritée
Cet exemple utilise la propriété héritée -webkit-line-clamp avec display défini sur -webkit-box.
Note :
Lors de l'utilisation de la propriété héritée -webkit-line-clamp, vous devez également définir overflow sur hidden, sinon le contenu n'est pas tronqué, bien qu'une ellipse soit toujours affichée après le nombre de lignes définies.
HTML
<p>
Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, ce qui
signifie que le texte est rogné après trois lignes. Une ellipse est 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