Exclusivobeta

Show More `<mv-show-more>`

Limita conteúdos longos a poucas linhas (ou a uma altura, para conteúdo misto) atrás de um esmaecimento suave e de um botão “Show more” que só existe quando algo é realmente cortado, verificado de novo ao redimensionar e ao carregar imagens e fontes; o texto oculto continua legível para leitores de tela e para a busca na página, Tab ou um #link para dentro dele o abre no lugar, e ao recolher o botão fica fixo para que a página nunca pule.

Categoria	Texto animado
Tipo	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

Instalação

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

Agente de IA com o servidor MCP do Marvelous UI: install_components({ slugs: ["show-more"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Arquivos copiados (dependências incluídas): 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.

Uso

Início rápido, a menor marcação que funciona:

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

Marcação de referência, para usar como ponto de partida e personalizar com atributos, data-* e variáveis 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	Tipo	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	Tipo	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.