Overflow is when a text element is too large to fit in a defined area. The overflow pattern involves the option to truncate the text element or expand it so that it flows over the specified area.

The overflow pattern can be created in two ways. The first is to truncate the text element, and the second is to expand the full text using a button or link.



Truncation is used for text and links that do not fit into the container assigned to them. The truncated element is identified by an ellipsis (3 dots). After hovering on the ellipsis, the full-length content's tooltip should appear.

End-line Ellipsis

The standard way to truncate content is to use the end-line ellipsis by placing the ellipsis at the end of the truncated content. It works in most cases when the content flows through the container.

End-line Ellipsis

Mid-line Ellipsis

The mid-line ellipsis involves placing the ellipsis in the middle of the truncated content in cases when it is important for both the beginning and end of the text element to be displayed to the user. Typically these are labels.

Mid-line Ellipsis

Front-line Ellipsis

A front-line ellipsis is used at the beginning of the content in cases when it is important for the end of the text element to be displayed to the user. Typically these are profile URLs that have a region at the end.

Front-line Ellipsis

Ellipses as such

An ellipsis on its own may also represent condensed content, such as an element in breadcrumb navigation.

Alone Ellipsis


Show more

To be able to fully display the truncated content, use the show more option. This also applies to content besides text. Show more involves adding a button or hyperlink that expands the rest of the content as well as the container. In most cases, the user should also be able to collapse the expanded content.

Show more button
Show more button - expanded


Group of elements

If you have more of the same elements that do not fit within a container, use the pattern showing a group of truncated elements followed by the number of how many more are hidden. On hover of that number, the rest of the hidden elements are displayed in a tooltip.

Group of elements shorter

If the tooltip container does not have enough space for full-length content, add a hyperlink in the tooltip specifying the number of remaining hidden elements. Clicking on that hyperlink should open a modal, panel or other space where all of the elements are displayed.

Group of elements longer