truncate (one line), line-clamp-2…6 (multi-line) — graceful text cutoffs. This family contains 10 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
line-clamp-none | overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: none; |
truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
text-ellipsis | text-overflow: ellipsis; |
text-clip | text-overflow: clip; |
line-clamp-1 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; |
line-clamp-2 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; |
line-clamp-3 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; |
line-clamp-4 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; |
line-clamp-5 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; |
line-clamp-6 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; |
Example#
example
<p class="line-clamp-3">Long article excerpt…</p>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- truncate needs overflow-hidden + whitespace-nowrap (included)
- line-clamp needs a block/inline-block box
Common mistakes#
- truncate in flex children needs min-w-0
Related#
colors/index|Text color · utilities/typography/font-size|Font size