React Text Overflow is a React component that targets the ability to overflow a single line of text (with ellipses) from the left, or the center, or from an offset. Hoping one day this is entireably possible with CSS but we're not quite there yet.
React Text Overflow requires React 17 or later.
npm i -S react-text-overflow
This is the most basic usecase, which honestly you should just use vanilla CSS for this piece. It will overflow text from the end.
import React from 'react';
import TextOverflow from 'react-text-overflow';
const MyComponent = () => (
<TextOverflow text="this is some text that we want to truncate." />
)
This will break the text in the center allowing the beginning and end to show.
const MyComponent = () => (
<TextOverflow truncatePosition="middle" text="this is some text that we want to truncate." />
)
This will break after the first 10 characters.
const MyComponent = () => (
<TextOverflow startPos={10} truncatePosition="middle" text="this is some text that we want to truncate." />
)
This causes the text to overflow from the left of the element.
const MyComponent = () => (
<TextOverflow truncatePosition="start" text="this is some text that we want to truncate." />
)
Type: start | middle | end
Default: end
This is what determines where the text will overflow.
Type: Number
Default: 0
This is to be used in combination with truncatePosition
center
, this will break the text in that location.
npm run build
cd examples
npm run dev