DEV Community

avcat
avcat

Posted on • Edited on

-webkit-line-clamp - vertical clamp lines

Classical approach

.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
Enter fullscreen mode Exit fullscreen mode

Declarative approach - waiting for CSS3 attr() function for all properties

[data-clamp-lines] {
  display: -webkit-box;
  -webkit-line-clamp: attr(data-clamp-lines number, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
Enter fullscreen mode Exit fullscreen mode

In Tailwind there is a handy class for it

<a class="line-clamp-<number>" href="..."></a>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)