Skip to content


The css-truncate class will shorten text with an ellipsis.

Truncate overflow

Combine the css-truncate and css-truncate-overflow classes to prevent text that overflows from wrapping.

Truncate target

Combine the css-truncate and css-truncate-target classes for inline (or inline-block) elements with a fixed maximum width (default: 125px).

You can override the maximum width of the truncated text with an inline style attribute:

You can reveal the entire string on hover with the addition of .expandable.

Edit this page on GitHub
4 contributorsjonrohankoddssonsimuraicolebemis
Last edited by jonrohan on March 22, 2021