Propriété CSS max-lines
La propriété CSS max-lines limite le nombre de lignes visibles dans un conteneur de bloc. Lorsque le contenu dépasse cette limite, il est coupé par la gestion du débordement du conteneur. Ce comportement fonctionne en tandem avec block-overflow: clamp; pour masquer proprement le contenu excédentaire.
La propriété max-lines peut créer un effet de limitation en conjonction avec la propriété block-overflow.
INFO
Cette propriété est en cours de développement.
Rappelons que la propriété line-clamp est un raccourci pour les propriétés max-lines et block-overflow.
WARNING
La propriété max-lines n'est pas actuellement prise en charge par tous les navigateurs. Pour une compatibilité plus large, vous pouvez utiliser la propriété -webkit-line-clamp en tant que solution de repli.
INFO
La prise en charge par les navigateurs est limitée. Consultez MDN pour une compatibilité à jour.
| Valeur initiale | none |
|---|---|
| S'applique à | Fragments de boîtes. |
| Héritée | Non. |
| Animable | Non. |
| Version | Module CSS Overflow Level 4 |
| Syntaxe DOM | object.style.maxLines = "2"; |
Syntaxe
Syntaxe de la propriété CSS max-lines
max-lines: none | <integer> | initial | inherit;Exemple de la propriété max-lines :
Exemple de la propriété CSS max-lines
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
overflow: hidden;
box-sizing: content-box;
width: 300px;
font-size: 16px;
line-height: 24px;
font-family: Helvetica, sans-serif;
max-lines: 3;
block-overflow: clamp;
-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 ne soit coupé. Les valeurs négatives sont invalides. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelle est la fonction de la propriété 'max-lines' en CSS ?