Ellipsis

The Ellipsis component is designed to manage long strings of text by truncating them and optionally allowing users to expand the text to view in full. This component is particularly useful for maintaining a clean UI when dealing with potentially lengthy content such as descriptions, comments, or articles.

This ellipsis component supports 2 different modes of operation:

Limit based on the number of characters
Limit based on the number of lines

It also supports a tooltip mode where the full text is visible on hover and the ability to expand/collapse the text.

Quick Start

To start using the Ellipsis component, import it from the reablocks library and provide the value and limit props.

import { Ellipsis } from 'reablocks';


export default function App() {
const longString = "Integer a aliquet ligula. Fusce vel eros libero. Sed dictum tincidunt hendrerit. Integer id neque faucibus, imperdiet purus dapibus, rutrum tellus. Nullam facilisis odio sit amet metus efficitur.";


return (
  <Ellipsis
    value={longString}
    limit={100}
  />
);
}

import { Ellipsis } from 'reablocks';

export default function App() {
const longString = "Integer a aliquet ligula. Fusce vel eros libero. Sed dictum tincidunt hendrerit. Integer id neque faucibus, imperdiet purus dapibus, rutrum tellus. Nullam facilisis odio sit amet metus efficitur.";

return (
  <Ellipsis
    value={longString}
    limit={100}
  />
);
}

Examples

Basic Usage

Expandable Text Section

In this example, the text is truncated with an ellipsis, and users can click on the ellipsis to reveal the hidden text:

Unexpandable Text Section

For cases where the full text should not be expanded within the component but is visible via a tooltip on hover:

Line Clamping

API

The Ellipsis component offers flexibility through several properties that adjust its behavior and presentation:

Name	Type	Default
`value`	`string` The value to ellipsis.
`expandable`	`boolean` Whether you can expand or not. Default: true.	`true`
`limit`	`number` Limit of characters to show. Default: 256.	`256`
`title`	`string \| false` The title text to show on the hover.
`removeLinebreaks`	`boolean` Remove line breaks or not.	`true`
`className`	`string` Class name for the container.
`theme`	`EllipsisTheme` Theme for the Ellipsis.
`lines`	`number` Number of lines to show before truncation. If set, overrides the character limit.
`moreText`	`string` Custom text for the expand button. Default: ”…”	`'...'`
`lessText`	`string` Custom text for the collapse button. Default: “Show less”	`'Show less'`

Design and Usability Tips

Content Access: Ensure the full content is accessible through interaction (click to expand) or tooltips, preventing loss of critical information.
Adaptive Text: Adjust the amount of truncated text based on the context and importance, ensuring key information is always visible to the user.