Propriété CSS max-lines
Utilisez la propriété CSS max-lines pour spécifier le nombre maximum de lignes du contenu. Voyez des exemples et testez par vous-même.
La propriété CSS max-lines limite le nombre de lignes visibles dans un conteneur de bloc. Lorsque le contenu dépasse cette limite, les lignes supplémentaires sont supprimées de la vue, et la gestion du débordement du conteneur détermine ce qui leur arrive. En pratique, on associe max-lines à block-overflow: clamp pour que le texte soit coupé proprement à la limite de ligne plutôt qu'au milieu d'un caractère.
Quand l'utiliser ?
Le cas d'utilisation classique est un accroche multi-lignes « lire la suite » : une carte, un extrait d'actualité ou une description de produit qui ne doit jamais dépasser, disons, trois lignes quelle que soit la longueur du texte source. Sans limite de lignes, un long paragraphe repousse tout ce qui se trouve en dessous et brise la grille. max-lines plafonne la hauteur en termes de lignes plutôt qu'en pixels fixes avec height, de sorte que la boîte reste cohérente même quand la taille de police ou l'interligne change.
max-lines est la brique de base longhand. Deux propriétés connexes complètent la même fonctionnalité :
- block-overflow — contrôle comment le bord tronqué est rendu (par exemple,
clampajoute des points de suspension à l'endroit de la coupure). - line-clamp — un raccourci qui définit
max-linesetblock-overflowensemble en une seule déclaration.
max-lines fait partie du module CSS Overflow de niveau 4, encore en évolution, et n'est implémentée par aucun navigateur majeur au moment de la rédaction. Pour un usage en production aujourd'hui, utilisez la propriété -webkit-line-clamp, largement supportée (illustrée dans l'exemple ci-dessous). Vérifiez toujours la compatibilité actuelle avant de déployer — voir la référence line-clamp sur MDN.
Comment fonctionne la troncature aujourd'hui (-webkit-line-clamp)
Étant donné que max-lines n'est pas encore utilisable, l'équivalent pratique est une petite combinaison de propriétés bien connue :
.teaser {
display: -webkit-box; /* required for the clamp to apply */
-webkit-box-orient: vertical;/* stack the lines vertically */
-webkit-line-clamp: 3; /* keep only the first 3 lines */
overflow: hidden; /* hide everything past the clamp */
}Cela produit le même résultat visuel que ce que max-lines: 3 est conçu pour faire : au plus trois lignes, avec des points de suspension (…) à l'endroit où le texte est coupé. L'exemple plus bas utilise à la fois la syntaxe expérimentale max-lines et le repli -webkit-line-clamp pour une dégradation gracieuse.
| Valeur initiale | none |
|---|---|
| S'applique à | Les boîtes de fragments. |
| Héritage | Non. |
| Animable | Non. |
| Version | CSS Overflow Module Level 4 |
| Syntaxe DOM | object.style.maxLines = "2"; |
Syntaxe
max-lines: none | <integer> | initial | inherit;Exemple de la propriété max-lines
Le paragraphe ci-dessous est limité à trois lignes. Les déclarations max-lines et block-overflow ciblent les navigateurs qui implémenteront finalement la spécification ; les déclarations -webkit-box, -webkit-box-orient et -webkit-line-clamp permettent d'obtenir le même effet dans les navigateurs actuels.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 300px;
font-size: 16px;
line-height: 24px;
font-family: Helvetica, sans-serif;
overflow: hidden;
/* Experimental, spec-based syntax */
max-lines: 3;
block-overflow: clamp;
/* Widely supported fallback */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
</head>
<body>
<h2>Max-lines property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| none | Aucun nombre maximum de lignes n'est spécifié. |
<integer> | Définit le nombre de lignes avant que le contenu soit tronqué. Les valeurs négatives sont invalides. |
| initial | Réinitialise la propriété à sa valeur par défaut. |
| inherit | Hérite de la propriété depuis son élément parent. |
Pièges courants
- Ce n'est pas encore une option réelle. Aucun navigateur majeur ne prend en charge
max-lines, donc s'y fier seul laisse votre contenu non tronqué. Incluez toujours le repli-webkit-line-clamp. - La troncature nécessite
overflow: hidden. Que vous utilisiezmax-linesou l'approche-webkit-box, les lignes excédentaires ne sont masquées que lorsque le débordement est découpé — sans cela, le texte déborde quand même. -webkit-line-clampexige le modèle de boîte adapté. Elle n'est effective que sur un élément avecdisplay: -webkit-boxet-webkit-box-orient: vertical. Oublier l'un ou l'autre est la raison la plus courante pour laquelle la troncature « ne fait rien ».- Elle compte les lignes, pas les caractères. Une boîte plus large ou une police plus petite fait tenir plus de texte par ligne, donc la même valeur
max-linesaffiche plus de mots. Utilisez-la pour contraindre la hauteur en lignes, pas la longueur exacte du texte.
Propriétés connexes
- block-overflow — détermine comment le bord tronqué est rendu.
- line-clamp — raccourci pour
max-linesetblock-overflow. - text-overflow — ajoute des points de suspension à une seule ligne qui déborde.
- overflow — contrôle ce qui arrive à tout contenu dépassant sa boîte.