Truncation

Truncation

When applying truncation, place the full text in a title attribute so that it’s accessible on hover.

Truncation: Fluid

Preview

No content has been added for this component.

No content has been added for this component.

About Truncation

If problems occur when using truncation with elements that use flexbox, you might need to add the .slds-has-flexi-truncate class on the flexbox child node ( .slds-col or .slds-col_padded elements) that contains the truncated text.

Note: There is an iOS bug that is triggered when you add a component from Visualforce into S1 using an iFrame. The truncated element does not recognize its width.


Overview of CSS Classes

Selector.slds-has-flexi-truncate
Summary

Needed when truncation is nested in a flexible container in a grid

Restrict*
ModifierTrue
Selector.slds-truncate_container_25
Summary

Truncates text at 25% of its parent container

Restrict*
ModifierTrue
Selector.slds-truncate_container_50
Summary

Truncates text at 50% of its parent container

Restrict*
ModifierTrue
Selector.slds-truncate_container_75
Summary

Truncates text at 75% of its parent container

Restrict*
ModifierTrue
Selector.slds-truncate_container_33
Summary

Truncates text at 33% of its parent container

Restrict*
ModifierTrue
Selector.slds-truncate_container_66
Summary

Truncates text at 66% of its parent container

Restrict*
ModifierTrue