익스클루시브

Show More `<mv-show-more>`

긴 콘텐츠를 몇 줄(또는 혼합 콘텐츠라면 높이)로 잘라 부드러운 페이드와 “Show more” 토글 뒤에 둡니다. 토글은 실제로 잘린 내용이 있을 때만 나타나며 크기 조정, 이미지와 폰트 로드 시 다시 확인합니다. 숨겨진 텍스트는 스크린 리더와 페이지 내 찾기로 계속 읽을 수 있고, Tab이나 내부를 가리키는 #링크로 그 자리에서 펼쳐지며, 접을 때는 토글을 고정해 페이지가 튀지 않습니다.

카테고리	애니메이션 텍스트
유형	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.