# Word-Break

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">word-break</span>` no WPF são projetadas para controlar o comportamento de quebra de palavras em elementos HTML, 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">word-break</span>`. Elas são ideais para gerenciar textos longos, layouts responsivos ou conteúdos em idiomas que não utilizam espaços entre palavras.

### Como Funcionam as Classes de Word-Break

As classes seguem uma sintaxe simples e intuitiva, permitindo ajustar a quebra de palavras de acordo com a necessidade. Veja as classes disponíveis:

<table border="1" id="bkmrk-classes-utilit%C3%A1rias-" style="width: 122.262%;"><colgroup><col style="width: 49.2247%;"></col><col style="width: 50.7753%;"></col></colgroup><thead><tr><td class="align-center">Classes Utilitárias</td><td class="align-center">Comportamento</td></tr></thead><tbody><tr><td class="align-center">`w-nobreak`  
</td><td class="align-center">*Usa o **comportamento padrão** de quebra de palavras, onde o texto só é quebrado em **espaços em branco** ou **pontos naturais**. Palavras longas podem ultrapassar os limites do contêiner se não houver espaços suficientes.*

</td></tr><tr><td class="align-center">`w-break`  
</td><td class="align-center">*Permite que palavras longas sejam quebradas em pontos arbitrários para se ajustar ao contêiner, evitando overflow. Ideal para textos em idiomas ocidentais com palavras extensas.*</td></tr><tr><td class="align-center">`w-break-all`  
</td><td class="align-center">*Quebra o texto em qualquer ponto, inclusive dentro de palavras. Útil para idiomas sem espaços, como chinês ou japonês.*</td></tr><tr><td class="align-center">`w-break-keep-all`  
</td><td class="align-center">*Impede a quebra dentro de palavras, mantendo-as intactas. Pode causar overflow se as palavras forem longas, sendo ideal para preservar a integridade de palavras em idiomas com espaços.*</td></tr></tbody></table>

### Como Usar

Aplique essas classes a elementos de texto como `<p>`, `<div>` ou `<span>`. Elas são especialmente úteis em layouts responsivos ou para textos multilíngues com diferentes necessidades de quebra.

#### Exemplo 1: Comportamento Padrão

```html
<div class="w-300px w-nobreak">
  <p>Palavra longa: Supercalifragilisticexpialidocious</p>
  <!-- A palavra longa pode ultrapassar o contêiner de 300px, pois a quebra só ocorre nos espaços. -->
</div>
```

#### Exemplo 2: Quebra de Palavras Longas

```html
<div class="w-300px w-break">
  <p>Palavra longa: Supercalifragilisticexpialidocious</p>
  <!-- A palavra é quebrada para se ajustar ao contêiner, evitando overflow. -->
</div>
```

#### Exemplo 3: Quebra em Qualquer Ponto

```html
<div class="w-300px w-breakall">
  <p>Texto em chinês: 这是一个很长的句子，没有空格。</p>
  <!-- O texto é quebrado em qualquer ponto, ajustando-se ao contêiner mesmo sem espaços. -->
</div>
```

#### Exemplo 4: Preservar Palavras

```html
<div class="w-300px w-break-keep-all">
  <p>Texto em japonês: これは非常に長い文で、単語を壊さないようにします。</p>
  <!-- As palavras são mantidas intactas, mas o texto pode ultrapassar o contêiner se for muito longo. -->
</div>
```

### Dicas de Uso

- **Idiomas sem Espaços**: Use `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">w-break-all</span>` para textos em *chinês*, *japonês* ou *tailandês*.
- **Preservar Palavras**: Prefira `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">w-break-keep-all</span>` para idiomas como *português* ou *inglês*, mantendo a legibilidade.
- **Combinações**: Combine 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 excessos de texto.
- **Responsividade**: Use `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">w-break</span>` com larguras dinâmicas (ex.: `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">w-100%</span>`) para layouts adaptáveis.
- **Testes**: Verifique o comportamento em diferentes navegadores, especialmente para idiomas específicos.

### Notas

<p class="callout warning">O uso de `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">w-break-all</span>` pode afetar a legibilidade; **aplique com cuidado** e teste o resultado visual.</p>

<p class="callout info">As classes `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">w-nobreak</span>` e `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">w-break</span>` são mais comuns em **idiomas ocidentais**, enquanto `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">w-break-all</span>` e `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">w-break-keep-all</span>` atendem a necessidades de **idiomas asiáticos** ou **textos técnicos**.</p>