TT Truncate

A tiny, fast, ssr-friendly, zero-deps string truncate React component based on css.

• Small: 600 B (minified and gzipped). No dependencies. Size Limit controls the size.
• Fast: 500ms (slowdown x6 - mobile cpu) re-drawing time of 4000+ components. Use only css/html.
• SSR: Ready for SSR. No DOM manipulation.
• Native Functionality: Search and copy works as expected from native truncation.

import {Truncate} from "tt-truncate";

<div>
    <Truncate tailLength={2}>I Love JetBrains</Truncate>
</div>

Showcases

See our examples and Showcase paragraph for url.

• Big Table Next JS
• Create React App

Install

npm install tt-truncate

Usage

Fit text to container (div). Crop string in the middle.

<div>
    <Truncate tailLength={2}>I Love JetBrains</Truncate>
</div>

Add custom classes

<div>
    <Truncate tailLength={2} className={'custom'}>I Love JetBrains</Truncate>
</div>

Add title

<div>
    <Truncate tailLength={2} title={'Super Title'}>I Love JetBrains</Truncate>
</div>

Props

Prop	Type	Description
children	string	Must be one line string, without special characters. Otherwise the behaviour is undefined
title	string	Shown on hover
tailLength	number	Length of tail
className	string	Class name applied to text

Browser Compatability

The package works in browsers where display: flex is supported.