mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-09 00:42:46 +08:00
119dc668d5
* feat: add SLDS applying and auditing quality skills Two new skills for SLDS v2 compliance: - applying-slds: guides artifact selection, styling hooks, utilities, icons - auditing-slds-quality: scored quality audit with linter + static analysis Made-with: Cursor * refactor: rename auditing-slds-quality skill to validating-slds Renames the skill directory and updates all references in applying-slds/SKILL.md and applying-slds/checklists.md. Made-with: Cursor * fix: improve accuracy and add manual review gate across SLDS skills Correct hook families, badge modifiers, and severity levels; add a manual review gate to validating-slds so automated grades alone cannot declare production readiness; make analyze-quality.cjs portable with explicit --hooks-index flag; remove dead parseYaml code; add version field to all three skill frontmatters. Made-with: Cursor * chore: retrigger CI Made-with: Cursor * fix: quote YAML descriptions and improve color hook disambiguation - Quote description frontmatter in all three skills for valid YAML (inner double quotes now escaped) - Strengthen Step 4 directive: MUST read color-hooks guide before choosing a hook — linter suggestions are unranked - Add surface vs surface-container disambiguation table - Add accent hook context table and state progression - Add standalone-component exception for surface classification - Add modal background example to examples.md - Remove redundant brand-button example (covered by new context table) Made-with: Cursor
127 lines
3.7 KiB
Markdown
127 lines
3.7 KiB
Markdown
---
|
|
id: slds.guidance.utilities.truncate
|
|
title: Truncate Utilities
|
|
description: SLDS text truncation utility classes
|
|
summary: "Utilities for text truncation. Single-line truncation with ellipsis and container-based percentage truncation."
|
|
|
|
artifact_type: reference
|
|
domain: utilities
|
|
topic: truncate
|
|
|
|
content_format: structured
|
|
complexity: intermediate
|
|
audience: [implementer]
|
|
|
|
tasks: [implement]
|
|
|
|
refs:
|
|
- slds.guidance.utilities
|
|
- slds.guidance.overview.utilities
|
|
- slds.guidance.utilities.line-clamp
|
|
|
|
tags: [utilities, truncate, text-overflow, ellipsis]
|
|
keywords: [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
|
|
```html
|
|
<!-- 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
|
|
```html
|
|
<!-- 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
|
|
```html
|
|
<!-- 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
|
|
```html
|
|
<!-- 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
|
|
```html
|
|
<!-- 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 |