Propriété CSS line-clamp
La propriété line-clamp tronque le texte à un nombre de lignes spécifié. Elle limite le texte au nombre de lignes souhaité, en ajoutant des points de suspension après le dernier mot visible ou une partie d'un mot.
Syntaxe
Syntaxe de la propriété CSS line-clamp
css
line-clamp: none | <integer>;Exemple de la propriété line-clamp :
Exemple de la propriété CSS line-clamp
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
align-items: center;
background: radial-gradient( farthest-side at bottom left, #eee, #ccc),
radial-gradient( farthest-corner at bottom right, #eee, #ccc 400px);
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
line-height: 1.5;
}
.element {
background-color: #fff;
box-shadow: 1px 1px 10px #666;
padding: 2em;
width: 200px;
}
.element p {
display: -webkit-box;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<h2>CSS line-clamp property example</h2>
<div class="element">
<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.</p>
</div>
</body>
</html>Résultat
Dans l'exemple ci-dessus, le texte est coupé à la troisième ligne.
Valeurs
| Valeur | Description |
|---|---|
| none | Aucun nombre maximum de lignes et aucune troncature. |
<integer> | Définit le nombre maximum de lignes avant de tronquer le contenu, puis affiche des points de suspension. |
Inconvénients de la propriété CSS line-clamp
La propriété CSS line-clamp présente certaines limitations :
- La propriété
line-clampest désormais largement prise en charge sur tous les navigateurs modernes. Pour les anciens navigateurs qui ne la supportent pas, vous pouvez utiliser une requête de fonctionnalité pour l'appliquer de manière conditionnelle :@supports (line-clamp: 2) { ... }. - Elle ne permet pas de personnaliser les points de suspension. Cela peut poser des problèmes, car les points de suspension par défaut peuvent ne pas bien s'adapter à différentes langues ou rendus de polices.
- La propriété nécessite plusieurs propriétés de support pour fonctionner correctement :
Propriété CSS line-clamp
css
.element {
overflow: hidden;
display: -webkit-box;
line-clamp: 2;
-webkit-box-orient: vertical;
}| Valeur initiale | none |
|---|---|
| S'applique à | - |
| Héritée | Oui. |
| Animable | Non. |
| Version | Module CSS Overflow Level 4 |
| Syntaxe DOM | object.style.lineClamp = "2"; |
WARNING
Remarque : display: -webkit-box est une implémentation flexbox héritée et non standard utilisée par les anciens navigateurs WebKit. Elle est conservée ici uniquement à des fins de compatibilité.
Pratique
Quelle est la fonction de line-clamp en CSS ?