Ellipsis content

EllipsisContent is a utility component that truncates text with an ellipsis when it overflows its container. When truncation occurs, it shows the full content in a Click UI Tooltip.

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
Prop tooltipProps	Type Positions the tooltip shown when content is truncated. Use side: "right" to keep it clear of content above the trigger.

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>
  )
}

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>
  )
}

Database Configuration Settings

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

function NavItem({ label }) {
  return (
    <EllipsisContent tooltipProps={{ side: 'right' }}>
      <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>
  )
}

Separator