Docs
πŸ—οΈ ⏐ Components
Data
Ellipsis πŸ†•

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.

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:

PropDescriptionDefault
value *The value to ellipsis.
string
expandableWhether you can expand or not. Default: true.
boolean
true
limitLimit of characters to show. Default: 256.
number
256
titleThe title text to show on the hover.
string | false
removeLinebreaksRemove line breaks or not.
boolean
true
classNameClass name for the container.
string
themeTheme for the Ellipsis.
EllipsisTheme
linesNumber of lines to show before truncation. If set, overrides the character limit.
number
moreTextCustom text for the expand button. Default: "..."
string
...
lessTextCustom text for the collapse button. Default: "Show less"
string
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.