afv-library/skills/design-systems-slds-apply/references/utilities/truncate.md

id	title	description	summary	artifact_type	domain	topic	content_format	complexity	audience	tasks	refs	tags	keywords
slds.guidance.utilities.truncate	Truncate Utilities	SLDS text truncation utility classes	Utilities for text truncation. Single-line truncation with ellipsis and container-based percentage truncation.	reference	utilities	truncate	structured	intermediate	implementer	implement	slds.guidance.utilities slds.guidance.overview.utilities slds.guidance.utilities.line-clamp	utilities truncate text-overflow ellipsis	slds-truncate text overflow ellipsis truncation

Truncate - Text Overflow

Text truncation with ellipsis.

Core Classes

Class	Purpose
slds-truncate	Truncates text at 100% container width with ellipsis
slds-truncate_container_25	Truncates text at 25% of parent width
slds-truncate_container_33	Truncates text at 33% of parent width
slds-truncate_container_50	Truncates text at 50% of parent width
slds-truncate_container_66	Truncates text at 66% of parent width
slds-truncate_container_75	Truncates text at 75% of parent width
slds-has-flexi-truncate	Applied to flex container to enable truncation in nested flexbox layouts

Common Patterns

Table Cell Truncation

<!-- Truncate long text in table cells -->
<table class="slds-table slds-table_cell-buffer">
  <tbody>
    <tr>
      <td class="slds-truncate" title="Complete text for accessibility">
        <!-- Long customer name truncates with ellipsis -->
        Very Long Customer Name That Will Be Truncated
      </td>
    </tr>
  </tbody>
</table>

List Item with Truncation

<!-- Email recipient list with truncation -->
<ul class="slds-list_horizontal">
  <li class="slds-list__item">
    <span>To:</span>
    <span class="slds-truncate slds-m-left_xx-small" title="john.doe@example.com">
      <!-- Email truncates to fit available space -->
      john.doe@example.com
    </span>
  </li>
</ul>

Card Header Truncation

<!-- Card with truncated title -->
<article class="slds-card">
  <div class="slds-card__header">
    <h2 class="slds-truncate" title="Full opportunity name">
      <!-- Title truncates if too long -->
      Very Long Opportunity Name - Q4 2024 Enterprise Deal
    </h2>
  </div>
</article>

Partial Width Truncation

<!-- Truncate at specific percentage of parent -->
<div class="slds-grid">
  <div class="slds-truncate_container_50">
    <!-- Truncates at 50% of parent container -->
    This text will truncate at half the parent width
  </div>
  <div class="slds-col">
    <!-- Remaining content -->
  </div>
</div>

Flexbox with Truncation

<!-- Use with flexbox layouts -->
<div class="slds-grid">
  <div class="slds-col slds-has-flexi-truncate">
    <span class="slds-truncate" title="Full file name">
      <!-- Truncates within flexible column -->
      very-long-filename-with-many-words.pdf
    </span>
  </div>
  <div class="slds-col_fixed">
    <button class="slds-button">Download</button>
  </div>
</div>

Best Practices

✅ Always include title attribute with full text for accessibility ✅ Use slds-has-flexi-truncate on flex container when truncating within flexbox ✅ Apply truncation to inline or block elements containing text ✅ Use container percentage classes for predictable truncation points ✅ Test truncation behavior across different viewport sizes

❌ Never truncate text without providing full text in title attribute ❌ Avoid truncating critical information like error messages ❌ Never use truncation on interactive elements without proper tooltips ❌ Avoid nested truncation classes