Text truncation
Clip a single line of overflowing text with a trailing ellipsis.
TextTruncate combines overflow: hidden,
text-overflow: ellipsis, and white-space: nowrap — the
.text-truncate helper — so long, unpredictable strings stay on one line.
Import
import { TextTruncate } from '@metatoy/bootstrap-styled';Example
Truncation only clips when the element is block (or inline-block) and has a bounded
width. Give it a max-width (or let a flex/grid track constrain it) and any overflow is
replaced with an ellipsis.
Inline truncation
TextTruncate renders a <div> by default. Use as="span" to truncate inline content —
for example a value that must share a line with a fixed label. Here the truncating item is
a flex child with min-width: 0, which lets it shrink below its content size and clip.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| as | React.ElementType | — | Defaults to `<div>` (e.g. use `as="span"` for inline truncation). |
TextTruncate forwards all native attributes of whatever element it renders, plus a ref.
Theming
Nothing to theme — the helper inlines the exact .text-truncate declarations and carries
no color of its own; text inherits your typography theme. Single-line clipping is the
whole feature; for multi-line clamping you’d reach for a -webkit-line-clamp utility, which
this helper deliberately does not cover (Bootstrap parity).
Accessibility
- Truncation is visual only — the full text remains in the DOM and is read in its entirety by screen readers, so no information is lost to assistive tech.
- Sighted users see only the clipped text, so consider surfacing the full value on demand:
add a native
title={fullText}for a hover tooltip, and ensure the content is reachable in full somewhere (e.g. an expanded view) when the complete string matters.