Typography
line-clamp
Limiting the contents of a container to the specified number of lines.
Overview
| Class | Declarations |
|---|---|
line-clamp:none | -webkit-line-clamp: none;
|
line-clamp:<integer> | display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: <integer>;
overflow: hidden;
overflow-wrap: break-word;
text-overflow: ellipsis;
|
Examples
Clamp long summaries
Use line-clamp:* to limit text to a fixed number of lines and hide the overflow.
<p class="line-clamp:3"> Master CSS turns class strings into deterministic CSS rules, making it practical to keep styling close to markup without giving up cascade control.</p>Generated CSS
@layer utilities { .line-clamp\:3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: break-word; text-overflow: ellipsis }}Remove a clamp
Use line-clamp:none when a responsive layout has enough space to show the whole paragraph.
<p class="line-clamp:2 line-clamp:none@sm"> The full description appears once the layout has enough horizontal room.</p>Keep important content accessible
Line clamping is visual truncation. Do not hide required legal, error, or instruction text behind a clamp without another way to read it.
<p class="line-clamp:2" title="Full project description"> Project description</p>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<p class="line-clamp:2:hover line-clamp:3@sm line-clamp:none@print">...</p>