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.