Truncate

A truncate is a tool used to shorten numeric and non-numeric character strings, typically when the string overflows its container.

Examples

Notes

The truncate component contains two child elements, .pf-v5-c-truncate__start and .pf-v5-c-truncate__end. If both start and end are present within .pf-v5-c-truncate, trucation will occur in the middle of the string. If only .pf-v5-c-truncate__start is present, truncation will occur at the end of the string. If only .pf-v5-c-truncate__end is present, truncation will occur at the beginning of the string. A .pf-v5-c-popover will be automatically applied to the PatternFly React implementation. &lrm; 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-v5-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-v5-c-truncate`	`<span>`	Initiates the truncate component.
`.pf-v5-c-truncate__start`	`<span>`	Defines the truncate component starting text.
`.pf-v5-c-truncate__end`	`<span>`	Defines the truncate component ending text.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-truncate	--pf-v5-c-truncate--MinWidth	12ch
	.pf-v5-c-truncate	--pf-v5-c-truncate__start--MinWidth	6ch

View source on GitHub