Readmore Lines JS Library Examples

A vanilla JS library that truncates text by rendered line count and adds an accessible read more/less toggle.

Default Behavior

Four visible lines with the default toggle style

Editorial teams often need a clean way to preview long descriptions without removing important context. This block keeps the first lines visible, adds a semantic button after the text, and lets the reader open the full copy in place.

The clamp is based on rendered lines, so it responds to the width of the container, the active font size, and the actual content. Narrow screens show fewer words per line, while wider screens preserve a compact preview without extra configuration.

The generated button updates its label and accessibility state whenever the section changes between collapsed and expanded views.

linesLimit: 4 default classes

Custom Labels

Custom button text and scoped theme variables

Product cards, editorial excerpts, resource summaries, and changelog entries often need a compact preview with text that matches the surrounding interface. This example uses custom button labels and a local visual treatment without changing the other demos.

The library scopes its generated styles to the nearest container and exposes custom properties for button color, background, padding, radius, font weight, hover state, and focus ring. Each component can carry its own visual language while using the same small API.

Because the button is created as a real button element, pointer interaction and keyboard activation work without replacing the native control model.

linesLimit: 3 custom labels custom classes

Multiple Elements

Independent read-more controls across a two-column content set

Review excerpt

The first version of a review can include purchase context, test conditions, comparison notes, and a final recommendation. A short preview keeps the layout clean while the complete evaluation remains available. Each element receives its own instance, state, aria relationship, and toggle button.

This block uses the same configuration as the adjacent summary, but expanding one item does not affect the other item.

Release note

A release note can carry practical details such as behavior changes, browser support, migration notes, and small compatibility warnings. Line-based truncation keeps dense notes scannable without cutting the text at an arbitrary character count.

The same setup can be applied with a loop over any selector, which makes it useful for lists, feeds, cards, comment threads, and documentation pages.

querySelectorAll separate instances

Dynamic Content

Destroy, update, and reinitialize an active target

Dynamic content can arrive after a search, filter, sort, preview edit, or client-side render. This demo destroys the current instance, replaces the text, and applies the line clamp again with the same public API.

The status panel confirms whether an instance exists after each operation, and the configuration remains available through the instance helper.

When styles change in a way that affects line height, the example invalidates cached measurements before creating a fresh instance.

Instance Utilities

Live state from helper functions

Default instance Pending

Dynamic instance Pending

Dynamic limit Pending

Style cache Pending