エクスクルーシブ

Show More `<mv-show-more>`

長いコンテンツを数行（混在したコンテンツなら高さ）に制限し、柔らかなフェードと「Show more」トグルで隠します。トグルは実際に何かが切り取られているときだけ存在し、リサイズ時や画像、フォントの読み込み時に再確認されます。隠れたテキストはスクリーンリーダーやページ内検索から読むことができ、Tab や内部への #link でその場で開きます。折りたたむときはトグルを固定するため、ページが跳ねることはありません。

カテゴリー	アニメーションテキスト
タイプ	Web Component (`<mv-show-more>`)
ステータス	安定版
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

インストール

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

Marvelous UI の MCP サーバーを使う AI エージェント：install_components({ slugs: ["show-more"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

コピーされるファイル（依存関係を含む）：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。

使い方

クイックスタート、動作する最小限のマークアップ：

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

基本となるマークアップです。ここから属性、data-*、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	タイプ	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	タイプ	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. Known limits: the lines clamp counts lines of the content's own line-height, so mixed content (headings, images, lists) should use height instead; the toggle can only stay in place on collapse when the page has room to scroll up (near the top of the page it moves up with the content); the fade is a mask, so it also fades a background painted inside the content box.