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.
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