Examples
The default behavior of the Truncate component is to truncate based on whether the content can fit within the width of its parent container, and to prevent text from wrapping. The following examples that use this default behavior render the <Truncate> component inside a resizable container, allowing you to see how the parent container width affects the truncation.
Default
By default content will be truncated at its end when it cannot fit entirely inside its parent container.
Middle
When passing a position property with a value of "middle", the position of the truncation will change based on the parent container's width and the amount of trailingNumChars passed in. The trailingNumChars will always be displayed, while the rest of the content will be truncated based on the parent container width.
Start
You can truncate content at its start by passing the position property with a value of "start". This can be useful if you have several strings to truncate that have similar text at the start, but unique text at the end that you want to have visible.
With custom tooltip position
You can customize the position of the <Tooltip> that is rendered by passing in the tooltipPosition property. The following example overrides the default "top" position with a "bottom" position.
Based on max characters
Rather than observing container width, you can have truncation be based on a maximum amount of characters that should always be displayed via the maxCharsDisplayed property. While the content's parent container width will not have an affect on whether truncation occurs, it will affect whether the content wraps. This property must be set to a value larger than 0, otherwise the component will fall back to observing container width.
Truncating based on a maximum amount of characters will truncate the content at the end by default. When the position property is set to "middle", the truncation will split the content as evenly as possible, providing a more "true middle" truncation.
Props
Truncate
| Name | Type | Default | Description |
|---|---|---|---|
| contentrequired | string | Text to truncate | |
| className | string | Class to add to outer span | |
| maxCharsDisplayed | number | The maximum number of characters to display before truncating. This will always truncate content when its length exceeds the value passed to this prop, and container width/resizing will not affect truncation. | |
| omissionContent | string | '\u2026' | The content to use to signify omission of characters when using the maxCharsDisplayed prop. By default this will render an ellipsis. |
| 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 a middle truncation. This will be overridden by the maxCharsDisplayed prop. |
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 |