When to use it

Use TruncatedText when the page has real long-form copy but should start with a tighter preview. It works well for product descriptions, editorial excerpts, and policy sections where the visitor may want the full text without navigating away.

If the content is always short, render the rich text directly instead of adding a read-more interaction.

Composition notes

html is the rendered body content. visibleLines controls how much of the content shows before the expand action appears, and labels lets you tune the expand and collapse copy for the page context.

Because the component renders HTML, keep the source content clean and predictable. Large nested markup will make the preview harder to judge and style consistently.

Behavior and theming guidance

Choose the initial line clamp based on intent. Product detail pages often need 2-4 lines, while editorial previews can sometimes start even shorter.

Use button labels that match the tone of the page. Read more is a safe default, but more contextual copy like Expand details or Show full policy can help when the content type is specific.