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

redhat_logo_black_and_white_reversed_simple_with_fedora_con tainer.zip

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

	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

Privacy statement Terms of use All policies and guidelines