ReadMore

Usage

<SReadMore :preview-height="200">
  <p>A long block of content...</p>
</SReadMore>

Collapsed height is a real pixel value (previewHeight, 200 by default), not a line-clamp - so it truncates any content, not just plain text. The reveal animates by transitioning max-height toward the content's own measured height (via ResizeObserver, re-measured if it changes), not the auto keyword - CSS can't animate toward auto, there's no intermediate value to interpolate through.

Content shorter than previewHeight renders with no truncation UI at all - the fade and toggle only appear once there's actually more to reveal. Before the first client-side measurement, though, content renders truncated by default (the safer assumption for SSR/no-JS output) - it never briefly flashes fully expanded before collapsing down.

Custom :ui

To see exactly what you'd be overriding - the current default classes for every slot and variant - here's ReadMore's own theme file:

Global and scoped theme recipes use ui.readMore.

Props

Slots