mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-08 16:25:58 +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
84 lines
2.3 KiB
Markdown
84 lines
2.3 KiB
Markdown
---
|
|
id: slds.guidance.utilities.hyphenation
|
|
title: Hyphenation Utilities
|
|
description: SLDS hyphenation utility class
|
|
summary: "Utility for text wrapping and hyphenation. Enables automatic word breaking in narrow containers."
|
|
|
|
artifact_type: reference
|
|
domain: utilities
|
|
topic: hyphenation
|
|
|
|
content_format: structured
|
|
complexity: intermediate
|
|
audience: [implementer]
|
|
|
|
tasks: [implement]
|
|
|
|
refs:
|
|
- slds.guidance.utilities
|
|
- slds.guidance.overview.utilities
|
|
- slds.guidance.utilities.truncate
|
|
|
|
tags: [utilities, hyphenation, text-wrapping, word-break]
|
|
keywords: [slds-hyphenate, hyphenation, word-wrap, overflow-wrap]
|
|
---
|
|
|
|
# Hyphenation - Text Wrapping
|
|
|
|
Enabling automatic text hyphenation and word breaking in narrow width containers.
|
|
|
|
## Core Classes
|
|
|
|
| Class | Purpose |
|
|
|-------|---------|
|
|
| `slds-hyphenate` | Enables text hyphenation with word-wrapping fallbacks for narrow containers |
|
|
|
|
## Common Patterns
|
|
|
|
```html
|
|
<!-- Long text in narrow column -->
|
|
<div class="slds-size_1-of-3">
|
|
<p class="slds-hyphenate">
|
|
Supercalifragilisticexpialidocious text that needs to break appropriately.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Table cell with potential long words -->
|
|
<td class="slds-cell-wrap">
|
|
<span class="slds-hyphenate">
|
|
VeryLongProductNameWithoutSpaces
|
|
</span>
|
|
</td>
|
|
|
|
<!-- Card header with constrained width -->
|
|
<div class="slds-card__header">
|
|
<h2 class="slds-text-heading_small slds-hyphenate">
|
|
ExtremelyLongTitleThatMightOverflow
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Form label in narrow sidebar -->
|
|
<div class="slds-form-element">
|
|
<label class="slds-form-element__label slds-hyphenate">
|
|
InternationalizationConfiguration
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Modal title with potential overflow -->
|
|
<div class="slds-modal__header">
|
|
<h2 class="slds-text-heading_medium slds-hyphenate">
|
|
SuperLongModalTitleForConfiguration
|
|
</h2>
|
|
</div>
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
✅ Use on text that might contain long words without spaces
|
|
✅ Apply to elements in narrow width containers
|
|
✅ Use with non-truncated text that needs to remain visible
|
|
✅ Combine with responsive grid columns where text might overflow
|
|
|
|
❌ Don't use with [Truncate Utilities](ref:slds.guidance.utilities.truncate) (choose one strategy)
|
|
❌ Don't apply to elements with fixed widths larger than their containers
|
|
❌ Don't use on numeric data or codes that shouldn't break |