Exclusifbêta

Show More `<mv-show-more>`

Limite un contenu long à quelques lignes (ou à une hauteur, pour un contenu mixte) derrière un fondu doux et un bouton « Afficher plus » qui n’existe que si quelque chose est vraiment coupé, revérifié au redimensionnement et au chargement des images et des polices ; le texte masqué reste lisible par les lecteurs d’écran et par la recherche dans la page, Tab ou un #lien vers son contenu l’ouvre sur place, et le repli épingle le bouton pour que la page ne saute jamais.

Catégorie	Texte animé
Type	Web Component (`<mv-show-more>`)
Statut	bêta
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

Agent IA avec le serveur MCP de Marvelous UI : install_components({ slugs: ["show-more"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : 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.

Utilisation

Démarrage rapide, le balisage minimal qui fonctionne :

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

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables CSS :

<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	Type	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	Type	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.