test clamp

by anitacontents

HTML

<div class="description">
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more a normal distribution about:</p>
  <ul>
    <li> It was popularised in the 1960s with the release of Letraset sheets</li>
    <li>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing</li>
    <li>Changing hrer lorem set lump to not allow sum to feel like a post more</li>
  </ul><br>
</div>

CSS

.description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 2rem;
  list-style-type: disc;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

p {
  font-size: 20px;
}