text-overflow
Determines how overflowing text is displayed. The most common use is representing truncated text with an ellipsis (...), and toe is the most widely used text truncation method.
Class List
| Class | CSS | Description |
|---|---|---|
toe | text-overflow: ellipsis | Display overflowing text as ... |
toc | text-overflow: clip | Default. Clips overflowing text without indicator |
Single-line Truncation Pattern
wsn oh toe — this combination of three classes is the key to text truncation. All three are required.
| Class | Role | If missing? |
|---|---|---|
wsn | No wrapping (white-space: nowrap) | Text wraps and does not overflow |
oh | Hide overflow (overflow: hidden) | Text overflows outside the container |
toe | Show ellipsis (text-overflow: ellipsis) | Clipped, but cut off without the ... |
Prerequisites
toe does not work alone. Must be used with wsn (no wrapping) + oh (overflow hidden).
<!-- Basic single-line truncation -->
<div class="w200px wsn oh toe">
Very long text that gets truncated with an ellipsis
</div>
<!-- wsn: white-space: nowrap
oh: overflow: hidden
toe: text-overflow: ellipsis -->Visual Comparison
The difference when handling the same long text in a fixed-width container.
No truncation (default) — Default state
This is a very long text. When it exceeds the container width, it is handled differently depending on the text-overflow property. In Atomic CSS, truncation is easily implemented with the wsn oh toe combination.
Text wraps to multiple lines
wsn only applied — wsn
This is a very long text. When it exceeds the container width, it is handled differently depending on the text-overflow property. In Atomic CSS, truncation is easily implemented with the wsn oh toe combination.
Wrapping disabled, text overflows container
wsn + oh — wsn oh
This is a very long text. When it exceeds the container width, it is handled differently depending on the text-overflow property. In Atomic CSS, truncation is easily implemented with the wsn oh toe combination.
Overflowing text hidden but no ellipsis
wsn + oh + toe (complete) — wsn oh toe
This is a very long text. When it exceeds the container width, it is handled differently depending on the text-overflow property. In Atomic CSS, truncation is easily implemented with the wsn oh toe combination.
Overflowing text shown as ... — correct pattern
Class Details
toetext-overflow: ellipsis
Displays overflowing text with .... Most commonly used for card titles, table cells, list items where long text must fit within a fixed width.
<!-- Single-line ellipsis (most common pattern) -->
<p class="wsn oh toe">
If this text is longer than the container, it is truncated with ...
</p>
<!-- Card Title -->
<div class="w30rem bg18181B p2rem br8px">
<h3 class="wsn oh toe fs16px fw700 cFAFAFA mb8px">
Very long card titles are truncated with ellipsis
</h3>
<p class="c71717A fs14px lh1-7">Card description</p>
</div>
<!-- Used in table cells -->
<td class="wsn oh toe maxw20rem">
Long data does not break the table layout
</td>
<!-- Used in flex children -->
<div class="df aic gap12px">
<img class="w4rem h4rem br50p" />
<span class="fg1 wsn oh toe">Long username or email address</span>
</div>Common Combinations
wsn oh toe | Single-line truncation (essential trio) |
wsn oh toe w100p | Truncation fitted to parent width |
wsn oh toe maxw30rem | Max-width constraint + truncation |
db wsn oh toe | Convert to block then truncate |
toctext-overflow: clip
Default value. Clips overflowing text without indicator. Use when truncation without ellipsis is sufficient.
<!-- Default: clip without indicator -->
<div class="w20rem oh">
<p class="wsn toc">
Overflowing text is clipped but ... is not shown
</p>
</div>Multi-line Truncation (line-clamp)
toe only supports single-line truncation. For multi-line, use lc (line-clamp) classes.
<!-- 2-line ellipsis -->
<p class="lc2-20px">
Long text is shown up to 2 lines, the rest is truncated with ...
This pattern is suitable for card descriptions, post previews, etc.
</p>
<!-- 3-line ellipsis -->
<p class="lc3-1-5rem">
Long text is shown up to 3 lines. Setting line-height to 1.5rem
allows for precise height calculation.
</p>2-line truncation — lc2-20px
This is a very long text. When it exceeds the container width, it is handled differently depending on the text-overflow property. In Atomic CSS, truncation is easily implemented with the wsn oh toe combination. This is a very long text. When it exceeds the container width, it is handled differently depending on the text-overflow property. In Atomic CSS, truncation is easily implemented with the wsn oh toe combination.
Show up to 2 lines, truncate the rest
3-line truncation — lc3-1-5rem
This is a very long text. When it exceeds the container width, it is handled differently depending on the text-overflow property. In Atomic CSS, truncation is easily implemented with the wsn oh toe combination. This is a very long text. When it exceeds the container width, it is handled differently depending on the text-overflow property. In Atomic CSS, truncation is easily implemented with the wsn oh toe combination.
Show up to 3 lines, truncate the rest
| Class | Description |
|---|---|
lc2-20px | 2-line truncation, line-height: 20px |
lc3-1-5rem | 3-line truncation, line-height: 1.5rem |
lc4-2rem | 4-line truncation, line-height: 2rem |
Tips & Notes
toe does not work alone
toe must be used with wsn + oh. If any is missing, truncation won't work.
Fixed width required
For truncation to work, element width must be constrained. Use w100p, maxw30rem, etc., or it auto-constrains as a flex/grid child.
Single-line vs Multi-line
Use wsn oh toe for single-line, and line-clamp classes like lc3-1-5rem for multi-line. line-clamp handles wsn, oh, toe internally.