Skip to content


  • Alpha
  • Not reviewed for accessibility

When text reaches lengths larger than existing container, shorten with ellipses.


Adding the .Truncate class and wrapping the inner text with .Truncate-text will truncate the text. .Truncate-text must be a direct descendant of .Truncate.

Truncate multiple items

You can add multiple .Truncate-text items in the same row and they will truncate evenly. If you want to make one of the items the primary text that doesn't truncate first, add the class .Truncate-text--primary class.

.Truncate-text--primary doesn't need to be the last item in the list or only have one instance. Consider this breadcrumb example where we want to highlight the Repository name and the Issue title. The rest of the breadcrumb will truncate and leave the name and title untruncated until we run out of space.

Expand on hover or focus

When there are multiple items in a list, you can add the .Truncate-text--expandable class to the .Truncate-text items and they will grow when :hover or :focus state is applied to them.

Custom max widths

It is recommended to use max-width as an inline style when you would like to have control over how far something can grow, even when there's enough space available.

Edit this page on GitHub
6 contributorssimuraisaintmalikjoelhawksleyjonrohankoddssoncolebemis
Last edited by simurai on December 16, 2022