Propriété CSS line-clamp

La propriété line-clamp tronque le texte dans un nombre spécifique des lignes. C'est une propriété raccourcie pour:

Cette propriété est en progrès.

Valeur initiale	none
Appliquée à	-
Héritée	Oui.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.lineClamp = "2";

Syntaxe

line-clamp: normal | <integer> | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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;
      -webkit-box-orient: vertical;  
      overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété CSS line-clamp </h2>
    <div class="element">
      <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.
      <p>
    </div>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple donné, le texte est coupé sur le quatrième ligne.

Valeurs

Valeur	Description
none	Pas de nombre maximal des lignes et pas de troncature.
<integer>	Définit le nombre maximal des lignes avant tronquer le contenu et ensuite affiche une ellipse.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.