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
This is a very long text that will be truncated with an ellipsis when it overflows the container
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop component | Type ElementType | Default value "div" | Description The HTML element or component to render as |
Prop children | Type ReactNode | Default value - | Description Content to display with ellipsis truncation |
Quick start
Use EllipsisContent to truncate text that may overflow its container:
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
user-profile-settings-configuration-panel.tsx
import { EllipsisContent, Text, Container } from '@clickhouse/click-ui'
function TableCell() {
return (
<Container style={{ width: '150px' }}>
<EllipsisContent>
<Text>{fileName}</Text>
</EllipsisContent>
</Container>
)
}Navigation items
Database Configuration Settings
import { EllipsisContent, Text } from '@clickhouse/click-ui'
function NavItem({ label }) {
return (
<EllipsisContent>
<Text weight='medium'>{label}</Text>
</EllipsisContent>
)
}Custom element type
This renders as a span element instead of a div
import { EllipsisContent, Text } from '@clickhouse/click-ui'
function InlineEllipsis() {
return (
<EllipsisContent component="span">
<Text>Inline truncated text</Text>
</EllipsisContent>
)
}