Utilities

Truncation

information

You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20

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

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.

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.

Examples#

Single Line#

Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages.

<div class="slds-size_1-of-2">
  <p class="slds-truncate" title="Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages.">Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages.</p>
</div>

Single Line with Nested Grid Containers#

Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages.

<div class="slds-grid" style="width:200px">
  <div class="slds-grid slds-has-flexi-truncate">
    <p class="slds-truncate" title="Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages.">Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages.</p>
  </div>

Maximum Width of 25%#

<ul>
  <li class="slds-list__item slds-m-right_large slds-grid slds-truncate_container_25">
    <span>To:</span>
    <span class="slds-m-left_xx-small slds-truncate" title="Lei Chan">

Maximum Width of 33%#

<ul>
  <li class="slds-list__item slds-m-right_large slds-grid slds-truncate_container_33">
    <span>To:</span>
    <span class="slds-m-left_xx-small slds-truncate" title="Lei Chan">

Maximum Width of 75%#

<ul>
  <li class="slds-list__item slds-m-right_large slds-grid slds-truncate_container_75">
    <span>To:</span>
    <span class="slds-m-left_xx-small slds-truncate" title="Lei Chan">

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

Truncation Utility Release Notes