Truncate

`<pura-truncate>` visually clips text to a fixed number of lines using line-clamp, showing an expand button only when the content actually overflows. Use it when you need to condense long descriptions, comments, or bios while keeping the option to see everything. The full text always remains in the DOM and the accessibility tree (only the clipping is visual), so screen readers and agents read the entire content; it also exposes an agent-native layer with stable data-* attributes and a global window.__puraTruncate registry keyed by id.

Preview

<pura-truncate lines="2" more-label="read more" less-label="read less" style="max-width: 380px; display: block;">
  The Blue Ridge Mountains are one of the most prominent ranges in the eastern United States, stretching across Virginia, North Carolina, and Georgia. Their trails, waterfalls, and mild climate draw visitors all year long, especially in the winter months, when temperatures drop close to freezing at the higher elevations.
</pura-truncate>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/truncate.js"></script>

import "./pura/lib/truncate.js";