TextClamp
TextClamp renders long content with optional expandable behavior.
Use it when pages need cleaner previews without overwhelming users.
Import
Basic usage
Why this is useful
- Keeps cards/lists visually balanced when text length varies.
- Improves scanability in feeds, blog indexes, and catalog pages.
- Gives users control to expand full content only when needed.
Common use cases
- Blog/news feed previews.
- Product descriptions on cards.
- Testimonial excerpts.
- Comment/thread summaries.
Without show more button
This is useful for strict preview layouts where expansion is not needed.
Custom button labels and style
TextClamp(
article_body,
max_chars=180,
expand_label="Read full post",
collapse_label="Show less",
button_cls="btn btn-sm btn-outline-primary mt-2",
)
Full card example
Card(
H5(post.title),
TextClamp(
post.body,
max_chars=220,
expand_label="Read full post",
collapse_label="Collapse",
button_cls="btn btn-sm btn-link p-0 mt-2",
),
)
API
text: Full text content.max_chars: Number of characters before truncation.show_more: Toggle expandable mode.expand_label: Expand button text.collapse_label: Collapse button text.button_cls: Button classes.ellipsis: Trailing truncation string.
Notes
- If text length is below
max_chars, no toggle button is rendered. show_more=Falsekeeps preview-only output.