Examples
Default with tooltip at the bottom
Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
Props
Truncate
| Name | Type | Default | Description |
|---|---|---|---|
| contentrequired | string | Text to truncate | |
| className | string | Class to add to outer span | |
| position | 'start' | 'middle' | 'end' | 'end' | Where the text will be truncated |
| tooltipPosition | | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'top' | Tooltip position |
| trailingNumChars | number | 7 | The number of characters displayed in the second half of the truncation |
CSS variables
| Expand or collapse column | Selector | Variable | Value |
|---|---|---|---|
| .pf-v6-c-truncate | --pf-v6-c-truncate--MinWidth | 6ch | |
| .pf-v6-c-truncate | --pf-v6-c-truncate__start--MinWidth | 6ch |