CSS | Propiedad webkit-line-clamp

La propiedad -webkit-line-clamp se usa para limitar la cantidad de líneas que puede contener un contenedor de bloques. Esta propiedad solo tiene efecto cuando la propiedad de visualización se establece en ‘-webkit-box’ o ‘-webkit-inline-box’ y la propiedad ‘-webkit-box-orient’ se establece en ‘vertical’.

Sintaxis:

-webkit-line-clamp: none | integer | initial | inherit

Valores de propiedad:

ninguno: se utiliza para especificar que el contenido no se sujetará. Es el valor predeterminado.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
  <title>
    -webkit-line-clamp property
  </title>
  <style>
  
    /* Clipped text for
      comparison */
    .content-1 {
      width: 300px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  
    .content-2 {
      width: 300px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: none;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <b>
    -webkit-line-clamp: 2
  </b>
  <p class="content-1">
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  </p>
  <b>-webkit-line-clamp: none</b>
  <p class="content-2">
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  </p>
</body>
</html>

Producción:
none

entero: se utiliza para especificar el número de líneas después de las cuales se recortará el contenido. Este valor debe ser mayor que 0.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
  <title>
    -webkit-line-clamp
  </title>
  <style>
    .content-1 {
      width: 300px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  
    .content-2 {
      width: 300px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <b>
    -webkit-line-clamp: 1
  </b>
  <p class="content-1">
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  </p>
  <b>-webkit-line-clamp: 3</b>
  <p class="content-2">
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  </p>
</body>
</html>

Producción:
lines

initial: Se utiliza para establecer la propiedad en su valor predeterminado.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
  <title>
    -webkit-line-clamp
  </title>
  <style>
      /* Clipped text for
      comparison */
    .content-1 {
      width: 300px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  
    .content-2 {
      width: 300px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: initial;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <h1 style="color: green;">
    GeeksforGeeks
  </h1>
  <b>-webkit-line-clamp: 2</b>
  <p class="content-1">
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  </p>
  <b>-webkit-line-clamp: initial</b>
  <p class="content-2">
    GeeksforGeeks is a computer
    science portal with a huge
    variety of well written and
    explained computer science
    and programming articles,
    quizzes and interview questions.
  </p>
</body>
</html>

Producción:
initial

heredar: Esto se usa para heredar la propiedad de su padre.

Navegadores compatibles: los navegadores compatibles con la propiedad -webkit-line-clamp se enumeran a continuación:

Google Chrome
Firefox
Safari
Ópera

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta