line-clamp
Limit visible text lines and provide a complete reading path.
Overview
| Class | Declarations |
|---|---|
line-clamp:none | line-clamp: none;
|
line-clamp:<integer> | line-clamp: <integer>;
|
Examples
Clamp long summaries
clamp-lines:3 provides the legacy box display, vertical orientation, three-line limit and overflow handling together. Compare a complete paragraph with its three-line preview.
<!-- line-clamp:none --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px line-clamp:none">Explore the shared canvas, review the project’s reference materials and agree on the next steps. Keep the complete description available so everyone can understand the decisions, constraints and details behind the work.</p><!-- clamp-lines:3 --><p id="target" class="clamp-lines:3 w:240px max-w:100% m:0 font-md leading:24px">Explore the shared canvas, review the project’s reference materials and agree on the next steps. Keep the complete description available so everyone can understand the decisions, constraints and details behind the work.</p>Generated CSS
@layer utilities { .clamp-lines\:3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: break-word; text-overflow: ellipsis }}The utility also sets emergency wrapping and an ellipsis. Keep padding outside the clamped text box.
Remove a clamp
line-clamp:none resets only the line limit. It does not undo the other declarations supplied by clamp-lines:2, such as box display and hidden overflow.
<!-- Two lines · reveal at sm --><p id="target" class="clamp-lines:2 w:240px max-w:100% m:0 font-md leading:24px line-clamp:none@sm">Explore the shared canvas, review the project’s reference materials and agree on the next steps. Keep the complete description available so everyone can understand the decisions, constraints and details behind the work.</p>Resize the viewport past sm to read the complete paragraph at the same line width.
Keep important content accessible
Provide an explicit way to read a truncated description. This native disclosure works with pointer, touch and keyboard input; a title tooltip alone is not a reliable full-text path.
<!-- Preview with a complete reading path --><p id="target" class="clamp-lines:2 w:240px max-w:100% m:0 font-md leading:24px">Explore the shared canvas, review the project’s reference materials and agree on the next steps. Keep the complete description available so everyone can understand the decisions, constraints and details behind the work.</p><details class="w:240px max-w:100% mt-md"> <summary class="font-md cursor:pointer">Read the full project description</summary> <p class="mb:0 mt-sm font-md leading:24px">Explore the shared canvas, review the project’s reference materials and agree on the next steps. Keep the complete description available so everyone can understand the decisions, constraints and details behind the work.</p></details>Clamping is visual: the underlying text may remain available to assistive technology. Keep required instructions and errors fully visible.
Apply conditionally
Use two preview lines initially and three at sm on screen. Print removes the line limit so the complete description is available.
<!-- Responsive preview · full print content --><p id="target" class="clamp-lines:2 w:240px max-w:100% m:0 font-md leading:24px line-clamp:none@print clamp-lines:3@screen@sm">Explore the shared canvas, review the project’s reference materials and agree on the next steps. Keep the complete description available so everyone can understand the decisions, constraints and details behind the work.</p>