React advanced ellipsis

Truncate string where you want and keep it's tail.

Original phrase:

I don't love ellipsis

Default ellipsis:

I don't love ellip...

Advanced ellipsis:

I do... love ellipsis

How to use

import { TailedEllipsis } from "react-advanced-ellipsis";

<TailedEllipsis tailLength={13}>I don't love ellipsis</TailedEllipsis>;

Props:

Prop	Description
children: string	Text to be truncated
tailLength: number	Length of a non shrinking tail
title?: string	Text title
className?: string	Text container className

NOTE: the library uses ResizeObserver inside. You may need a polyfill for some old browsers.

Storybook

You can see components here https://minhir.github.io/react-advanced-ellipsis