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
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.
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.
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.
Ellipses as such
An ellipsis on its own may also represent condensed content, such as an element in breadcrumb navigation.
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.
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.
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.
