Truncate

A truncate component can be used to shorten character strings—typically when the string overflows its container.

Examples

Default

Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.

Middle

redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip

Start

Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.

Default with tooltip at the bottom

Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.

Props

Truncate

*required
NameTypeDefaultDescription
contentrequiredstringText to truncate
classNamestringClass to add to outer span
position'start' | 'middle' | 'end''end'Where the text will be truncated
tooltipPosition| TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end''top'Tooltip position
trailingNumCharsnumber7The number of characters displayed in the second half of the truncation

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-truncate--pf-v6-c-truncate--MinWidth
6ch
.pf-v6-c-truncate--pf-v6-c-truncate__start--MinWidth
6ch