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.
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 column | Selector | Variable | Value |
|---|---|---|---|
| :where(:root, .pf-v6-c-truncate) | --pf-v6-c-truncate--MinWidth | 6ch | |
| :where(:root, .pf-v6-c-truncate) | --pf-v6-c-truncate__start--MinWidth | 6ch |
