---
url: /docs/foundations/css-classes/text-overflow.md
---
> Typography

# Text Overflow

Utilities for controlling text overflow in an element.

## Quick reference

| Class | Description |
|-------|-------------|
| `truncate` | `overflow: hidden text-overflow: ellipsis white-space: nowrap` |
| `text-ellipsis` | `text-overflow: ellipsis` |
| `text-clip` | `text-overflow: clip` |

## Basic usage

### Truncate

Use `truncate` to prevent text from wrapping and truncate overflowing text with an ellipsis (`…`).

```html
<p class="truncate ...">...</p>
```

### Ellipsis

Use `text-ellipsis` to truncate overflowing text with an ellipsis (`…`).

```html
<p class="text-ellipsis overflow-hidden ...">...</p>
```

### Clip

Use `text-clip` to clip the text at the limit of the content area.

```html
<p class="text-clip overflow-hidden ...">...</p>
```