Truncate

The css-truncate class will shorten text with an ellipsis. Always add a title attribute to the truncated element so the full text remains accessible.

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
2 contributorssimuraicolebemis
Last edited by simurai on November 8, 2019