La propriété CSS line-clamp permet de limiter le nombre de lignes de texte affichées dans un élément. Elle est particulièrement utile pour afficher des extraits de texte concis et éviter les débordements dans des mises en page contraignantes.
Introduite initialement comme préfixe -webkit-line-clamp pour les navigateurs basés sur WebKit, elle est désormais implémentée nativement dans la plupart des navigateurs modernes et fait partie du standard CSS officiel.
La propriété line-clamp
- -webkit-line-clamp: none;
- -webkit-line-clamp: 3;
- -webkit-line-clamp: 2;
- -webkit-line-clamp: 1;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
Fonctionnement de line-clamp
La propriété line-clamp n’est pas une propriété CSS standard unique, mais elle est utilisée en combinaison avec d’autres propriétés CSS pour obtenir l’effet souhaité. Elle est souvent utilisée avec des préfixes spécifiques aux moteurs de rendu des navigateurs, en particulier WebKit.
La propriété line-clamp s’applique aux éléments en bloc et nécessite l’utilisation de la valeur -webkit-box ou -webkit-inline-box pour la propriété display.
Elle prend un seul argument, qui représente le nombre maximum de lignes à afficher. Lorsque le contenu textuel dépasse le nombre spécifié, il est tronqué et un ellipsis ... est ajouté à la fin de la dernière ligne visible pour indiquer la présence de texte masqué.
Syntaxe de base de la propriété line-clamp
Considérons un élément HTML contenant un paragraphe de texte :
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut.</p>La propriété line-clamp fonctionne uniquement si la propriété display a pour valeur -webkit-box ou -webkit-inline-box et si la propriété -webkit-box-orient a pour valeur vertical.
Dans la plupart des cas, on utilisera également overflow avec la valeur hidden, afin de masquer le contenu qui dépasse (plutôt que d’afficher une ellipse en dehors de la boîte).
p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; /* Orientation vertical de la boite */
overflow: hidden;
}Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
Explication des Propriétés Utilisées
display: -webkit-box;: Cette propriété active le modèle de boîte flexible basé sur WebKit, nécessaire pour utiliser-webkit-line-clamp.-webkit-box-orient: vertical;: Cette propriété définit l’orientation de la boîte flexible en mode vertical.-webkit-line-clamp: 3;: Cette propriété limite le nombre de lignes à afficher. Dans cet exemple, le texte est limité à 3 lignes.overflow: hidden;: Cette propriété cache le texte qui déborde du conteneur, ce qui est essentiel pour obtenir l’effet de troncature.
Valeurs pour la propriété line-clamp
La propriété line-clamp offre des options supplémentaires pour contrôler le comportement de la troncation :
none: Désactive la troncation et affiche l’intégralité du texte.nombre de lignes: Valeur par défaut. Ajoute un ellipsis (…) à la fin de la dernière ligne visible.
Astuce pour calculer la hauteur d’un élément
Gràce à la fonction calc() en CSS, il est possible de déterminer la hauteur d’un élément dont le nombre de lignes est tronqués :
.clamped-text {
display: -webkit-box;
-webkit-line-clamp: 3; /* Limite à 3 lignes */
-webkit-box-orient: vertical;
overflow: hidden;
/* Calcul de la hauteur maximum */
line-height: 1.5em; /* Hauteur de ligne */
max-height: calc(1.5em * 3); /* Limite à 3 lignes */
}La hauteur d’une ligne est de 1.5em. Sachant que la boite contiendra au maximum 3 lignes -webkit-line-clamp, la hauteur maximum max-height est obtenu en multipliant la hauteur de ligne par trois.
Compatibilité des navigateurs
La propriété line-clamp est largement prise en charge par les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Cependant, pour une compatibilité optimale, il est recommandé d’utiliser le préfixe -webkit- pour garantir un affichage cohérent dans les anciennes versions de navigateurs basés sur WebKit.
Exemples concrets
Voici quelques exemples concrets d’utilisation de la propriété line-clamp dans différents contextes :
- Affichage d’extraits d’articles de blog ou de nouvelles
- Affichage de témoignages ou de citations
- Création de menus déroulants concis : Affichez uniquement un nombre limité d’options dans les menus déroulants pour améliorer la lisibilité et réduire l’encombrement.
La propriété line-clamp en CSS est un outil puissant pour contrôler l’affichage du texte dans les interfaces utilisateur, en s’assurant que le contenu ne dépasse pas un nombre spécifié de lignes. Bien que principalement supportée par les navigateurs basés sur WebKit, il existe des solutions de repli pour assurer une compatibilité inter-navigateurs.
