ExklusivBeta

Show More `<mv-show-more>`

Kürzt lange Inhalte auf wenige Zeilen (oder eine Höhe, bei gemischten Inhalten) hinter einem weichen Verlauf und einem „Show more“-Schalter, den es nur gibt, wenn wirklich etwas abgeschnitten ist, neu geprüft bei Größenänderung sowie beim Laden von Bildern und Schriften; der verborgene Text bleibt für Screenreader und die Seitensuche lesbar, Tab oder ein #Link dorthin öffnet ihn an Ort und Stelle, und beim Einklappen wird der Schalter fixiert, damit die Seite nie springt.

Kategorie	Animierter Text
Typ	Web Component (`<mv-show-more>`)
Status	Beta
Keywords	exclusive, light, read-more, show-more, line-clamp, truncate, collapse, expand, disclosure

When to use

Product descriptions, bios or reviews should stay short in a card with a way to read the rest in place
A list of comments or reviews mixes short and long entries and only the long ones should get a toggle
A changelog or release notes block with headings and lists should show its top part and expand in place

Avoid when

The content is split into titled sections the reader opens one by one → use Accordion instead
A full review section with ratings, filters, votes and a write form is needed → use Review instead
The hidden part is essential to the task (terms to accept, a required step): show it in full

Installation

node scripts/add.mjs show-more --out ./src/marvelous

KI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["show-more"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Kopierte Dateien (inklusive Abhängigkeiten): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/motion.js, core/observe.js, components/show-more/show-more.js, components/show-more/show-more.css.

Verwendung

Schnellstart mit dem kleinsten funktionierenden Markup:

<mv-show-more lines="4"><p>Long description…</p></mv-show-more>

Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1rem;width:100%;max-width:980px;margin-inline:auto;align-items:start">
  <article style="padding:1.1rem 1.2rem;border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl);background:var(--mv-surface)">
    <p style="margin:0 0 .2rem;font-size:.75rem;color:var(--mv-fg-subtle);letter-spacing:.04em;text-transform:uppercase">Product details</p>
    <h3 style="margin:0 0 .15rem;font-size:1.05rem">Aurora Linen Throw</h3>
    <p style="margin:0 0 .75rem;font-weight:600">$89.00</p>
    <mv-show-more lines="3" style="font-size:.9rem;line-height:1.6;color:var(--mv-fg-muted)">
      <p>Woven in Kaunas, Lithuania, from stonewashed European flax, the Aurora throw is soft from the first day and softer with every wash. The loose herringbone breathes in summer and layers over a duvet in winter, and the fringed edges are hand-knotted in the same workshop that spins the yarn.</p>
      <p>Measures 51 × 67 in. Machine wash cold, tumble dry low. Ships in recycled paper packaging within 2 business days.</p>
    </mv-show-more>
  </article>

  <section style="display:grid;gap:.75rem">
    <article style="padding:1rem 1.2rem;border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl);background:var(--mv-surface)">
      <header style="display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.4rem;font-size:.8rem">
        <strong>Mei Tanaka</strong><span style="color:var(--mv-fg-subtle)">Aug 14, 2026</span>
      </header>
      <mv-show-more lines="3" style="font-size:.9rem;line-height:1.6">
        <p>I bought it for the couch and it ended up on the bed. The color is exactly as pictured, a warm oat that works with both the gray sofa and the walnut headboard. It shed a little in the first wash, nothing after that. The fringe survived two cats, which is honestly the best review I can give anything.</p>
      </mv-show-more>
    </article>
    <article style="padding:1rem 1.2rem;border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl);background:var(--mv-surface)">
      <header style="display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.4rem;font-size:.8rem">
        <strong>Lucas Oliveira</strong><span style="color:var(--mv-fg-subtle)">Jul 29, 2026</span>
      </header>
      <mv-show-more lines="3" style="font-size:.9rem;line-height:1.6">
        <p>Heavier than I expected, in a good way. Worth the $89.</p>
      </mv-show-more>
    </article>
  </section>

  <article style="padding:1.1rem 1.2rem;border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl);background:var(--mv-surface)">
    <p style="margin:0 0 .6rem;font-size:.75rem;color:var(--mv-fg-subtle);letter-spacing:.04em;text-transform:uppercase">Changelog</p>
    <mv-show-more height="10.5rem" style="font-size:.875rem;line-height:1.55">
      <h4 style="margin:0 0 .35rem;font-size:.95rem">v2.4.0 <span style="font-weight:400;color:var(--mv-fg-subtle)">· Sep 18, 2026</span></h4>
      <ul style="margin:0 0 .9rem;padding-inline-start:1.1rem;color:var(--mv-fg-muted)">
        <li>Invoices can be split across up to four payment methods.</li>
        <li>Exports now include the tax ID and billing address.</li>
        <li>The customer portal remembers the last selected currency.</li>
      </ul>
      <h4 style="margin:0 0 .35rem;font-size:.95rem">v2.3.2 <span style="font-weight:400;color:var(--mv-fg-subtle)">· Sep 2, 2026</span></h4>
      <ul style="margin:0 0 .9rem;padding-inline-start:1.1rem;color:var(--mv-fg-muted)">
        <li>Fixed refunds over $10,000 being rounded to the nearest dollar.</li>
        <li>Webhook retries back off to a maximum of 6 hours.</li>
      </ul>
      <h4 style="margin:0 0 .35rem;font-size:.95rem">v2.3.0 <span style="font-weight:400;color:var(--mv-fg-subtle)">· Aug 20, 2026</span></h4>
      <ul style="margin:0;padding-inline-start:1.1rem;color:var(--mv-fg-muted)">
        <li>New <a href="#" style="color:var(--mv-accent)">usage API</a> with hourly granularity.</li>
        <li>Team roles: Owner, Admin, Billing and Viewer.</li>
      </ul>
    </mv-show-more>
  </article>
</div>

API

Attributes

Name	Typ	Default	Description
`lines`	number	`4`	Number of visible lines when collapsed (line clamp; the last line fades out toward its end).
`height`	CSS length		Clamp to a height instead of lines (e.g. 12rem), with a bottom fade: for headings, lists and images. A bare number means px.
`expanded`	boolean		Open state; reflected, set it to open or close from code (animated, no event).
`more-label`	string	`Show more`	Toggle text while collapsed (overrides strings.more).
`less-label`	string	`Show less`	Toggle text while expanded (overrides strings.less).
`data-overflow`	boolean		Set by the component when the content is really cut (for styling).
`data-state`	collapsed \| expanded \| moving		Set by the component (moving = height animation in progress).

Properties

Name	Typ	Description
`strings`	{ more, less }	Default toggle labels, for translation (the attributes win). Assignable before the element is defined.
`overflowing`	boolean	True when the content is taller than the clamp and the toggle is shown (read-only).

Methods

Name	Description
`toggle(force?)`	Opens (true), closes (false) or flips, as a click would, emitting mv-toggle; returns false if vetoed.

Events

Name	Description
`mv-toggle`	Before opening or closing; cancelable. detail = { expanded, reason: "user" \| "reveal" \| "api" } (reveal = find-in-page, focus or a link reached hidden content).

Content structure

Name	Description
`(default)`	Any content; it is wrapped in .mv-show-more-content, or provide that element yourself (frameworks that own their children).

CSS classes

Name	Description
`mv-show-more-content`	The clamped box (generated if absent).
`mv-show-more-toggle`	The generated `<button>` (hidden when nothing is cut).

CSS variables

Name	Default	Description
`--mv-show-more-fade`	`min(45%, 12em) / 3.5em`	Width of the fade at the end of the last line (lines), or height of the bottom fade (height).
`--mv-show-more-color`	`var(--mv-accent)`	Toggle color.
`--mv-show-more-duration`	`var(--mv-duration-slow)`	Open and close animation duration.

Accessibility

A real <button> right after the content, with aria-expanded and aria-controls, whose text says what it does (“Show more” / “Show less”); it only exists when something is cut, so screen reader and keyboard users never meet a toggle that does nothing. The clamp is a plain overflow clip, not display:none, content-visibility or hidden=until-found (those drop the text from the accessibility tree): screen readers read the whole text while it is collapsed, and find-in-page still finds it. When the browser scrolls the clip to show something (a find match, Tab into a hidden link, a #fragment), or a selection lands in the hidden part, the content opens instantly with that spot kept where it was. Collapsing keeps the toggle at the same place on screen, so focus and reading position survive. Hiding one line or less is skipped (the text is shown in full). Reduced motion (system or data-motion="reduce"): no height animation. Forced colors: no fade, LinkText toggle, Highlight focus outline. Print: everything shown, toggle hidden. Without JavaScript nothing is clamped.