Truncate

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

Examples

Notes

The truncate component contains two child elements, .pf-v6-c-truncate__start and .pf-v6-c-truncate__end. If both start and end are present within .pf-v6-c-truncate, trucation will occur in the middle of the string. If only .pf-v6-c-truncate__start is present, truncation will occur at the end of the string. If only .pf-v6-c-truncate__end is present, truncation will occur at the beginning of the string. A .pf-v6-c-popover will be automatically applied to the PatternFly React implementation. ‎ must be included at the end of string to denote the ending punctuation mark. Otherwise it will occur and the beggining of truncation for a pf-v6-c-truncate__end element.

Default

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

Middle

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

Start

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

Documentation

Usage

Class
Applied
Outcome
.pf-v6-c-truncate
<span>
Initiates the truncate component.
.pf-v6-c-truncate__start
<span>
Defines the truncate component starting text.
.pf-v6-c-truncate__end
<span>
Defines the truncate component ending text.

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