Usage
Overflow content refers to text, like a paragraph or a string of words, that extends beyond the available space. This concept also applies to a collection of components that exceeds the specified area.
Usually, overflow content is minimized to fit within the space or to avoid redundancy. Three common methods to handle overflow content are truncation, scrolling, or the use of “show more” buttons.
Truncation
Text ellipsis
Truncation is used for text or links that exceed the size of their container. Truncated items are represented by an ellipsis (...) right after the text. There must be at least four characters of non-truncated content in a truncated string.
Truncated items should include a tooltip on hover to show the entire string, name, or phrase that the ellipsis is representing.
Truncation rules are defined within the documentation for each component where it is supported. Truncation should not be used on page headers, titles, labels, error messages, validation messages, or notifications.
As seen in breadcrumbs, an ellipsis on its own may also represent condensed content. This type of truncation requires an overflow menu on hover instead of a browser tooltip.
Overflow menu
A group of elements that do not all fit in the space available can also be truncated with an ellipsis icon, such as in the navigation rail or the top app bar.
Scrolling
When hiding the items of a group inside a scrollable container such as an image carousel, a tab menu, a table, etc., explicit hints for overflow (like hiding half of the last item) and controls (like arrows and scrollbars) should be provided to inform the user that they can view more content.
Show more
A “Show more” text button, indicates that additional content is available in a different location or below the fold. Use it when there is a significant amount of overflow content, hiding nonessential information, but still keeping it readily accessible, to save screen space.
When the content is expandable, a “Show less” button will be used to hide the opened content. The show more/less button is collapsed by default, but can be modified to be expanded by default considering context.
The text labels for the button are customizable. Make them more descriptive so that users can better anticipate the hidden content and, in expandable cases, accompany them with a dropdown arrow that flips when the supplemental text is revealed.
Alignment
By default, when used after a block of text, the component is left-aligned directly below. It can also be used inline within a paragraph or sentence to save space.
When content is expanded, the 'Show less' text button can appear below the expanded content, or remain in the same position if there is a lot of dynamic content to display.
In special cases when the button is the main action, it can appear aligned to the right, following the buttons guidelines.
