Propriété CSS line-clamp

La propriété line-clamp tronque un bloc de texte à un nombre de lignes spécifié, en ajoutant des points de suspension (…) à l'endroit où le texte est coupé. C'est la méthode standard pour créer des aperçus « Lire la suite » sur plusieurs lignes — par exemple, limiter la description d'une carte à trois lignes quelle que soit la longueur du texte source.

Cette page couvre la syntaxe, un exemple fonctionnel, les propriétés de support dont dépend line-clamp, la compatibilité navigateur avec le préfixe -webkit-, ainsi que les limitations de la propriété.

Pourquoi utiliser line-clamp

Avant line-clamp, limiter le texte à une seule ligne nécessitait de combiner overflow: hidden, white-space: nowrap et text-overflow: ellipsis. Cette astuce ne fonctionne que pour une seule ligne — white-space: nowrap force tout le contenu sur une seule rangée. line-clamp résout le cas multi-lignes, lorsque l'on veut, par exemple, exactement trois lignes renvoyées à la ligne suivies de points de suspension.

Syntaxe

line-clamp: none | <integer>;

Utilisez none pour désactiver la troncature, ou un entier positif pour le nombre maximum de lignes à afficher.

Exemple de la propriété line-clamp

L'exemple ci-dessous limite le paragraphe à trois lignes. Notez les trois propriétés complémentaires — display: -webkit-box, -webkit-box-orient: vertical et overflow: hidden — qui sont requises pour que la troncature prenne effet (voir Propriétés de support ci-dessous).

<!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;
        -webkit-line-clamp: 3;
        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>

Essayez vous-même »

Résultat

![Propriété CSS line-clamp](/uploads/media/default/0001/04/510c4d8bde7d07ba0ff1b843ad8b4dfdc122aadf.png "CSS line-clamp property result" =420x)

Dans l'exemple donné, le texte est coupé à la troisième ligne. Étant donné que -webkit-line-clamp est la forme réellement implémentée par les navigateurs, -webkit-line-clamp: 3 et le standard line-clamp: 3 sont tous deux déclarés afin que la règle fonctionne partout aujourd'hui et reste valide à mesure que la propriété sans préfixe gagne en support.

Propriétés de support

line-clamp ne fonctionne pas seul. L'élément doit établir une boîte flexible et masquer le débordement :

Propriété	Pourquoi elle est nécessaire
`display: -webkit-box`	Fait passer l'élément à la mise en page Flexbox héritée contre laquelle `line-clamp` est défini.
`-webkit-box-orient: vertical`	Dispose les lignes de la boîte verticalement afin qu'elles puissent être comptées et tronquées.
`overflow: hidden`	Masque les lignes au-delà de la limite ; sans elle, le texte déborde et aucun point de suspension n'apparaît.

Valeurs

Valeur	Description
none	Pas de nombre maximum de lignes et pas de troncature.
`<integer>`	Définit le nombre maximum de lignes avant de tronquer le contenu, puis affiche des points de suspension.

Limitations de la propriété CSS line-clamp

La propriété est pratique mais comporte quelques contraintes à connaître :

Elle repose sur le préfixe -webkit-. Dans tous les navigateurs actuels, la propriété fonctionnelle est -webkit-line-clamp. La version sans préfixe line-clamp fait partie du CSS Overflow Module Level 4 et est en cours d'adoption, mais vous devez toujours déclarer la version préfixée pour la compatibilité.
Vous ne pouvez pas personnaliser les points de suspension. Le caractère de troncature est fixe et peut ne pas convenir à toutes les langues ou tous les rendus de police.
Elle nécessite plusieurs propriétés de support pour prendre effet — vous ne pouvez pas l'utiliser sur un élément de bloc ordinaire :

.element {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

Vous pouvez encapsuler les règles dans une requête de fonctionnalité lorsque vous avez besoin de détecter le support avant de les appliquer :

@supports (-webkit-line-clamp: 2) {
  .element {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

Valeur initiale	none
S'applique à	-
Hérité	Oui.
Animatable	Non.
Version	CSS Overflow Module Level 4
Syntaxe DOM	object.style.lineClamp = "2";

Avertissement

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 comme solution de repli pour la compatibilité.

Sujets connexes

CSS text-overflow — tronquer une seule ligne avec des points de suspension.
CSS overflow — contrôler comment le contenu en débordement est affiché ou masqué.
CSS white-space — gérer le renvoi à la ligne, le complément de la troncature sur une seule ligne.
CSS overflow-wrap — couper les mots longs pour qu'ils ne débordent pas.

Pratique

Quelle est la fonction de line-clamp en CSS ?

Elle est utilisée pour appliquer des styles à une ligne.Elle est utilisée pour limiter le nombre de lignes dans un bloc de texte.Elle est utilisée pour aligner le texte le long d'une ligne.Elle crée un effet visuel de 'serrage' sur le contenu d'un élément en limitant les lignes de texte affichées.