# Text-Wrap

As classes utilitárias de `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">text-wrap</span>` no **WPF** permitem controlar como o texto é quebrado e exibido em um elemento, utilizando a propriedade CSS `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">text-wrap</span>`. Elas são ideais para ajustar a apresentação de texto em layouts variados, desde evitar quebras de linha até aplicar modos avançados de formatação.

A propriedade `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">text-wrap</span>` define o comportamento de quebra de linha do texto dentro de um contêiner. Com as classes do WPF, você pode facilmente aplicar esses comportamentos sem escrever CSS manualmente, garantindo consistência e praticidade no design.

### Classes Disponíveis

- `t-nowrap`: Impede que o texto quebre em várias linhas, exibindo-o em uma única linha contínua. Útil para títulos ou textos que devem permanecer compactos, mas pode gerar overflow se o conteúdo for maior que o contêiner.
- `t-wrap`: Permite que o texto quebre em linhas de forma natural, conforme o espaço disponível e as regras de quebra de palavras do navegador.
- <span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">`t-wrap-auto`: </span>Deixa o navegador escolher o modo de quebra mais adequado.
- `t-wrap-balance`: Distribui o texto de forma equilibrada entre as linhas, ideal para parágrafos curtos.
- `t-wrap-stable`: Garante consistência no layout durante a renderização, evitando mudanças bruscas.
- `t-wrap-pretty`: Prioriza a legibilidade, ajustando as quebras para um fluxo visual mais agradável.

### Exemplos de Uso

#### Exemplo 1: Texto em Linha Única

```html
<span class="t-nowrap">Este texto longo não será quebrado em várias linhas.</span>
```

#### Exemplo 2: Quebra de Linha Padrão

```html
<p class="t-wrap">Este texto será quebrado em linhas conforme o espaço disponível no contêiner.</p>
```

#### Exemplo 3: Modos Específicos

```html
<p class="t-wrap-balance">Este parágrafo será balanceado para linhas de tamanhos similares.</p>
<p class="t-wrap-pretty">Este texto é ajustado para melhor legibilidade e fluidez.</p>
```

### Dicas e Notas

<p class="callout info">**Overflow**: Use `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">t-nowrap</span>` com classes de <span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">overflow</span> (ex.: `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">overflow-hidden</span>`) para gerenciar texto que ultrapassa o contêiner.</p>

<p class="callout warning">**Compatibilidade**: Modos como *<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">balance</span>* e *<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">pretty</span>* podem não ser suportados em navegadores antigos. Teste em seu ambiente alvo.</p>