How this helps marketers
Truncation helps manage long strings of text where space is limited within the UI or where names of items like campaigns, templates, or journeys can get lengthy and there is additional content to include.
In most cases, when text is truncated, it is paired with a tooltip on hover to view the full string of text. Even then, the tooltip does have a max-height, so exceptionally long names may not always be visible in every instance they are shown in the product.
Guidelines
In most core components, truncation will be included, but there are instances when truncation may need to be applied in domain-specific modules or one-off instances. A few considerations when using truncation:
- Visibility: The truncation method should not obscure critical information. Prioritize the marketers’ needs and the context of how the truncation is used
- Truncation type: Select the most appropriate truncation type (see below) based on the context
- Interactivity: Provide a way to view the full string—generally through a tooltip, or clicking to expand the text
- Accessibility: Include the full text in the element’s title attribute to accommodate screen readers
- Consistency: Consider how truncation is applied to similar elements across the platform
Truncation types
There are three different types of truncation that can be applied depending on where the most important content of the string applies.
- End truncation: use when the beginning of the text contains the most valuable information.
- Start truncation: Use when the end of the text contains the most valuable information.
- Middle truncation: Use when both the beginning and end of the text are both important
CSS properties
Single line of text
When wanting to show a single line of text, you can use the <Truncate> component utility. This will limit the length of the text to the container.
A static max-width value can also be set, but not preferred (ideally max-width would be defined in the parent container).
p {
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
width: fit-content;
white-space: nowrap;
}
An example of showing a single line of text that fits the available space.
For example, the name of a campaign label is defined by the marketer, and can sometimes exceed the bounds of the Action Menu it’s contained within in the filter menu. By using the single line truncation, it allows each Checkbox Select Menu Item to stay the same height, but the full string of text can be viewed while hovering.
A defined number of lines
By leveraging the line-clamp css property, the number of visible lines can be defined. This can be helpful in situations where the text string may get lengthy inherently, like a campaign name, and we have the space to show n number of lines.
.container {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
For example, in the Alerts panel, the campaign name in the Slide Over panel allows the campaign name to wrap 2 lines of text, and then truncates the text.
Examples
- In tables, lists, or elements with restricted space
- For lengthy text that exceeds the maximum allowed space
- Avoid truncating critical information; use tooltips or expandable text for essential details
Best practices
- Review the truncation properties set on the core component prior to defining custom parameters values.
- Test truncation using the Iterable Name Generator plugin in Figma to ensure the approach works across different use cases.
- When implementing truncation via code, utilize the <Truncate> and <TruncateTooltip> utility components to quickly and consistently apply truncation.