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:

  • Classes UtilitáriasComportamento
    w-nobreak:

    Usa o comportamento padrão de quebra de palavras, onde o texto só é quebrado em espaços em branco ou pontos naturais.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