Skip to content
PatternFly logo

Truncate

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Notes

The truncate component contains two child elements, .pf-c-truncate__start and .pf-c-truncate__end. If both start and end are present within .pf-c-truncate, trucation will occur in the middle of the string. If only .pf-c-truncate__start is present, truncation will occur at the end of the string. If only .pf-c-truncate__end is present, truncation will occur at the beginning of the string. A .pf-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-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-c-truncate
<span>
Initiates the truncate component.
.pf-c-truncate__start
<span>
Defines the truncate component starting text.
.pf-c-truncate__end
<span>
Defines the truncate component ending text.

CSS variables

.pf-c-truncate--pf-c-truncate--MinWidth
12ch
.pf-c-truncate--pf-c-truncate__start--MinWidth
6ch

View source on GitHub