TryIt Editor v2.0 - Example of CSS line-clamp Property

Source Code: (back to article)

Result: Report an issue

<!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;

-webkit-box-orient: vertical;

overflow: hidden;

}

</style>

</head>

<body>

<h2>CSS line-clamp property example</h2>

<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>

<!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;
        -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>