Examples
Default
Truncates at the end; container width decides.
This is a long string of text that will be truncated at the end of the line when the container is narrow.
With custom tooltip position
Hover shows the full text in a bottom-positioned tooltip.
Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip
Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip
Based on max characters
Clamped to a 20-character budget instead of the container.
Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip
With links
The anchor itself truncates.
Documentation
Truncate props
Parameters accepted by
{#include components/data-display/truncate ... /}. Model mode: pass
truncate=<Truncate> built in Java instead — the Java tab on each example shows
the builder.
| Name | Type | Description |
|---|---|---|
* content
|
String |
The full text. Always rendered into the <span> (visually truncated by CSS). Kept as a String param
(not a slot) because the middle-truncate variant needs to substring it server-side. Matches PF React's
content prop name.
|
id
|
String | DOM id on the wrapper. |
position
|
end | start | middle
|
Where the ellipsis goes. Default end.
|
trailingNumChars
|
Integer |
Number of trailing chars to keep visible for position="middle". Default
7.
|
Usage
Pick the position by content type. URLs and emails: end. File paths
and breadcrumbs: start. Identifiers with meaningful suffix (UUIDs, hashes):
middle.
Container width matters. CSS truncation only kicks in when content exceeds the parent's width. Wrap in a sized container — a flex item, table cell, or explicit max-width.