Readmore

by Front Factory

Short by default. Long on demand.

Clamp text to N lines or a fixed height. The toggle appears only when there is something left to read.

Get startedGitHub
npm install @frontfactory/readmore
“Less is more.” — Robert Browning, Andrea del Sarto, 1855. Readmore takes it literally — show less, and let readers ask for more.
A paragraph clamped to three lines with a Read more button, and the same paragraph expandedA paragraph clamped to three lines with a Read more button, and the same paragraph expanded

  • Zero dependencies

    About 1.7 KB gzipped, with TypeScript types included.

  • CSS-driven clamping

    Uses -webkit-line-clamp or max-height, so the browser does the layout work.

  • Only when needed

    The toggle button is created only when the text actually overflows, and removed if it stops overflowing.

  • Accessible by default

    aria-expanded and aria-controls are set on the toggle button and kept in sync.