---
title: Ellipsis content
description: EllipsisContent truncates overflowing text with an ellipsis and automatically adds a tooltip with the full content.
category: Typography
related: [Text, Container, Tooltip]
commonPatterns: [truncation, overflow-handling, responsive-text]
---

Source: https://clickhouse.design/click-ui/ellipsiscontent

# Ellipsis content

EllipsisContent is a utility component that truncates text with an ellipsis when it overflows its container. It automatically sets a title attribute with the full content when truncation occurs.

## Example

## Props

| Prop      | Type          | Default value | Description                                 |
| --------- | ------------- | ------------- | ------------------------------------------- |
| component | `ElementType` | `"div"`       | The HTML element or component to render as  |
| children  | `ReactNode`   | `-`           | Content to display with ellipsis truncation |

```tsx
import { EllipsisContent } from '@clickhouse/click-ui'

<EllipsisContent>
<Text>Long text that might overflow...</Text>
</EllipsisContent>
```

## Quick start

Use EllipsisContent to truncate text that may overflow its container:

```tsx
import { EllipsisContent, Text, Container } from '@clickhouse/click-ui'

function TruncatedText() {
return (
  <Container style={{ width: '150px' }}>
    <EllipsisContent>
      <Text>This long text will be truncated</Text>
    </EllipsisContent>
  </Container>
)
}
```

## Related components

- **Text**: Use inside EllipsisContent for styled text
- **Container**: Provides the bounded width for truncation
- **Tooltip**: For manual tooltip control on truncated content

## Common use cases

### Table cell content

```tsx
import { EllipsisContent, Text, Container } from '@clickhouse/click-ui'

function TableCell() {
return (
  <Container style={{ width: '150px' }}>
    <EllipsisContent>
      <Text>{fileName}</Text>
    </EllipsisContent>
  </Container>
)
}
```

### Navigation items

```tsx
import { EllipsisContent, Text } from '@clickhouse/click-ui'

function NavItem({ label }) {
return (
  <EllipsisContent>
    <Text weight='medium'>{label}</Text>
  </EllipsisContent>
)
}
```

### Custom element type

```tsx
import { EllipsisContent, Text } from '@clickhouse/click-ui'

function InlineEllipsis() {
return (
  <EllipsisContent component="span">
    <Text>Inline truncated text</Text>
  </EllipsisContent>
)
}
```