Dynamic Middle Ellipsis

Dynamically truncate long text in the middle for multiple frameworks. Preserves the most important parts of your text with smart, responsive, and pixel-perfect text truncation.

🔗 Live Demo

Packages

This monorepo contains multiple packages for different use cases:

🔗 React

Components for react projects.

npm install @dynamic-middle-ellipsis/react

import createMiddleEllipsis from "@dynamic-middle-ellipsis/react";

const MiddleEllipsis = createMiddleEllipsis();

<MiddleEllipsis.Span>
  This text will truncate in the middle when space is limited
</MiddleEllipsis.Span>

🔗 Core

Core utils for vanilla js projects.

npm install @dynamic-middle-ellipsis/core

import { truncateOnResize, setFontWidthMap } from '@dynamic-middle-ellipsis/core';

// Basic usage
const cleanup = truncateOnResize({
  targetElement: document.getElementById('text-element'),
  originalText: 'This is a very long text that needs truncation.pdf',
});

// Cleanup when done
cleanup();