Truncating lines of text

clamping.css

/* 
SAMPLE HTML

<div class="demo-grid">
    <div class="demo-card">
        <img width="200" height="200" src="https://placekitten.com/200/200?image=1" alt="" class="demo-img">
        <h1 class="line-clamp demo-title">
            Spill litter box, scratch at owner, destroy all furniture, especially couch
        </h1>
    </div>

    <div class="demo-card">
        <img width="200" height="200" src="https://placekitten.com/200/200?image=2" alt="" class="demo-img">
        <h1 class="line-clamp demo-title">
            Claws in the eye of the beholder
        </h1>
    </div>

    <div class="demo-card">
        <img width="200" height="200" src="https://placekitten.com/200/200?image=3" alt="" class="demo-img">
        <h1 class="line-clamp demo-title">
            Relentlessly pursues moth eat too much then proceed to regurgitate all over living room carpet while humans eat dinner
        </h1>
    </div>
</div> */



/* By default, truncate the text abruptly */
.line-clamp {
  /* Careful computing the max-height, it needs to match n * line-height */
  max-height: calc(2 * 1.15 * 1.5rem);
  overflow: hidden;
}

/* For capable browsers, truncate with an ellipsis */
/* To simulate a browser without support, you can add a s after clamp in the following line */
@supports (-webkit-line-clamp: 2) {
  .line-clamp {
      /* Remove the made up max-height */
      max-height: none;
      
      /* Those three properties are mandatory, so is overflow: hidden that we defined earlier */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
  }
}


/* Extra code for the look of the demo */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem,1fr));
  gap: 1rem;
  margin: 1rem;
}
.demo-card {
  background-color: #E2E8F0;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}
.demo-img {
  align-self: center;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
}
.demo-title {
  font-size: 1.5rem;
  margin: 0;
}