Typography

Text Clamp

Utilities for sets total display text line to an element.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
text-clamp-1	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis; position: relative; visibility: visible
text-clamp-2	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis; position: relative; visibility: visible
text-clamp-3	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis; position: relative; visibility: visible
text-clamp-4	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis; position: relative; visibility: visible
text-clamp-5	display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis; position: relative; visibility: visible

Usage

Clamp-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Clamp-2

Clamp-3

Clamp-4

<div class="text-clamp-3 ... text-md depth-tight-2">
  ...
</div>

HTML

.duumy {
  @extend
    .text-clamp-3,
    .text-md depth-tight-2;
}

SCSS