line-clamp
Truncates text to a specified number of lines and displays an ellipsis (...). Combines -webkit-line-clamp, line-height, max-height, and overflow: hidden into a single class.
Pattern
lc{lines}-{lineHeight}Connect the number of lines and line-height with a hyphen. Decimal points in line-height values are also expressed with hyphens.
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Part | Description | Example |
|---|---|---|
| lc | line-clamp prefix | lc |
| {lines} | Maximum number of lines to display | 1, 2, 3 |
| - | Separator hyphen | - |
| {lineHeight} | line-height value (with unit) | 20px, 1-5rem |
Class List
| Class | Lines | line-height | Description |
|---|---|---|---|
lc1-16px | 1 | 16px | 1-line clamp, line-height 16px |
lc1-20px | 1 | 20px | 1-line clamp, line-height 20px |
lc2-20px | 2 | 20px | 2-line clamp, line-height 20px |
lc2-1-5rem | 2 | 1.5rem | 2-line clamp, line-height 1.5rem (15px) |
lc3-20px | 3 | 20px | 3-line clamp, line-height 20px |
lc3-1-5rem | 3 | 1.5rem | 3-line clamp, line-height 1.5rem (15px) |
lc4-20px | 4 | 20px | 4-line clamp, line-height 20px |
Generated CSS
The line-clamp class internally sets multiple CSS properties at once.
/* CSS generated by lc2-20px */
.lc2-20px {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 20px;
max-height: 40px; /* 2 × 20px */
}
/* CSS generated by lc3-1-5rem */
.lc3-1-5rem {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.5rem;
max-height: 4.5rem; /* 3 × 1.5rem */
}Visual Comparison
Compares results of applying different line counts of line-clamp to the same text.
1-line clamp — lc1-20px
Atomic CSS is a methodology that maps each CSS property to a single class. You can immediately tell what styles are applied just from the class name, and it reduces bundle size by eliminating unnecessary CSS duplication. Since styles are managed at the property level rather than the component level, it is advantageous for maintaining consistency in design systems.
2-line clamp — lc2-20px
Atomic CSS is a methodology that maps each CSS property to a single class. You can immediately tell what styles are applied just from the class name, and it reduces bundle size by eliminating unnecessary CSS duplication. Since styles are managed at the property level rather than the component level, it is advantageous for maintaining consistency in design systems.
3-line clamp — lc3-20px
Atomic CSS is a methodology that maps each CSS property to a single class. You can immediately tell what styles are applied just from the class name, and it reduces bundle size by eliminating unnecessary CSS duplication. Since styles are managed at the property level rather than the component level, it is advantageous for maintaining consistency in design systems.
No clamp (original text)
Atomic CSS is a methodology that maps each CSS property to a single class. You can immediately tell what styles are applied just from the class name, and it reduces bundle size by eliminating unnecessary CSS duplication. Since styles are managed at the property level rather than the component level, it is advantageous for maintaining consistency in design systems.
Practical Patterns
line-clamp is most commonly used to maintain description text at a consistent height in card components.
Card list (2-line clamp)
Card Title A
A short description.
Read moreCard Title B
Atomic CSS is a methodology that maps each CSS property to a single class. You can immediately tell what style is applied just from the class name.
Read moreCard Title C
Managing styles at the property level rather than the component level is very advantageous for maintaining design system consistency.
Read moreList item (1-line clamp)
Item title
A short single-line description text.
Item title
Atomic CSS is a methodology that maps each CSS property to a single class, letting you understand styles just from class names.
Item title
By managing styles at the property level rather than the component level, it achieves both design system consistency and bundle optimization.
Usage Examples
<!-- Card description 2-line clamp -->
<div class="bg18181B p16px br8px">
<h3 class="fs16px cFAFAFA fw600 mb8px">Card Title</h3>
<p class="fs14px c71717A lc2-20px mb12px">
Long description text goes here.
Truncated with ellipsis when exceeding 2 lines...
</p>
<a href="#" class="fs12px c6366F1">Read more</a>
</div>
<!-- List item 1-line clamp -->
<div class="df aic gap12px">
<div class="w4rem h4rem bg6366F1 br4px fs0"></div>
<div class="fg1 minw0">
<p class="fs14px cFAFAFA fw600">Item title</p>
<p class="fs12px c71717A lc1-16px">
Long subtitle is truncated to one line with ellipsis.
</p>
</div>
</div>
<!-- 3-line clamp (rem unit) -->
<p class="fs14px c71717A lc3-1-5rem">
Uses rem unit for line-height.
Decimals are expressed with hyphens.
Truncated when exceeding 3 lines.
</p>Tips & Notes
line-height matching is important
The line-height value in the class must match the appropriate line-height for the text's font-size. lc2-20px calculates max-height based on line-height: 20px.
Uniform card height
In card lists where description text lengths vary, using line-clamp to maintain uniform height keeps the grid layout clean.
rem unit decimal notation
Decimal points in rem units are expressed with hyphens. lc3-1-5rem means 3 lines, line-height: 1.5rem. Note that hyphens are used for two purposes.
Parent needs minw0 (flex)
If line-clamp does not work in flex child elements, add minw0 to the parent. The default min-width of flex items can prevent text truncation.