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>

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.

Support de Navigateurs

14.0
-webkit-
17.0+ 5.1
-webkit-
15
-webkit-


Trouvez-vous cela utile?

Articles Associées