Ir para o conteúdo principal

Word-Break

As classes utilitárias de word-break no WPF são projetadas para controlar o comportamento de quebra de palavras em elementos HTML, utilizando a propriedade CSS word-break. 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:

  • w-nobreak: 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.

  • w-break: 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.

  • w-break-all: Quebra o texto em qualquer ponto, inclusive dentro de palavras. Útil para idiomas sem espaços, como chinês ou japonês.
  • w-break-keep-all: 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.

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

<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

<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

<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

<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 w-break-all para textos em chinês, japonês ou tailandês.

  • Preservar Palavras: Prefira w-break-keep-all para idiomas como português ou inglês, mantendo a legibilidade.

  • Combinações: Combine com classes de overflow (ex.: overflow-hidden) para gerenciar excessos de texto.

  • Responsividade: Use w-break com larguras dinâmicas (ex.: w-100%) para layouts adaptáveis.

  • Testes: Verifique o comportamento em diferentes navegadores, especialmente para idiomas específicos.

Notas

  • O uso de w-break-all pode afetar a legibilidade; aplique com cuidado e teste o resultado visual.

  • As classes w-nobreak e w-break são mais comuns em idiomas ocidentais, enquanto w-break-all e w-break-keep-all atendem a necessidades de idiomas asiáticos ou textos técnicos.

Voltar ao topo