20.03.2025

Quebrando Palavras Longas em Span: Uma Solução Sem Overflow

Resposta Rápida

Para quebrar de forma ordenada textos longos dentro de um elemento <span> com uma largura predefinida, você deve aplicar as propriedades CSS overflow-wrap: break-word; e white-space: normal;. Assim, palavras longas não excederão a largura especificada e serão adequadamente envolvidas na próxima linha.

.span-wrap {
  width: 200px;
  overflow-wrap: break-word;
  white-space: normal;
}

<span class="span-wrap">PalavraExtremamenteLongaQuePrecisaQuebrar</span>

Como resultado, o texto dentro do span não excederá a largura definida de 200 pixels e será quebrado conforme necessário.

Análise Detalhada: overflow-wrap vs word-break

As propriedades CSS overflow-wrap: break-word; e word-break: break-all; enfrentam efetivamente o problema de quebrar palavras que não contêm espaços. Aqui estão as principais diferenças entre elas:

• overflow-wrap: break-word; envolve o texto cuidadosamente, sem dividir palavras em partes.
• word-break: break-all; divide palavras em partes de forma implacável, ignorando os limites das palavras.

Se você deseja manter a integridade das palavras, é melhor optar por overflow-wrap.

Herança de CSS: Span Dentro de Outros Elementos

Quando um elemento span está aninhado dentro de outros elementos, as regras de quebra de texto ainda se aplicam. Aqui está um exemplo:

/* Coloque span dentro de um item de lista */
li span {
  display: block;
  width: 100px;
  overflow-wrap: break-word;
}

Com essas configurações, o texto dentro do span será quebrado mantendo a legibilidade.

Visualização

Vamos supor que você precise encaixar um texto muito longo dentro de um pequeno elemento span:

Antes: 🚂🚃🚃🚃🚃🚃🚃🚃🚃🚃🚃🚃🚃🚃🚃[Estação]🏠

O texto é muito longo e excede os limites da estação, certo?

Agora vamos aplicar os métodos de quebra de texto:

span {
  display: block;
  overflow-wrap: break-word;
}

Depois: 🚂
        🚃🚃🚃
        🚃🚃🚃
        🚃🚃🚃
        [Estação]🏠

Agora o texto é corretamente quebrado em várias linhas dentro do tamanho especificado do span.

Verificação Prática - Nós Conseguimos!

Ao implementar a quebra de texto, tenha em mente:

• Tamanhos Fixos: Defina explicitamente a largura do elemento span para que o texto se encaixe corretamente.
• Design Responsivo: Sempre teste como o texto é exibido em diferentes dispositivos para oferecer uma interface amigável a todos os usuários.
• Acessibilidade: Assegure uma boa legibilidade do texto após a quebra.

Formatação de Código - Porque Organização é Fundamental

Garanta que seu código CSS esteja bem organizado e com clareza, usando a indentação apropriada. Para a comunidade Stack Overflow, envolva seu CSS em tags style e use blocos pre e code para melhor legibilidade.

Trabalhando com Conteúdo Gerado pelo Usuário: Espere o Inesperado

Se o span incluir conteúdo enviado por usuários, esteja preparado para estruturas variadas de dados textuais e caracteres.

Demonstração em Ação: Mostre, Não Apenas Diga

Para melhor visualização, demonstre sua solução em ação em plataformas como JSFiddle, CodePen ou StackBlitz.

Recursos Úteis

1. Propriedade CSS word-wrap — Uma descrição detalhada da propriedade word-wrap.
2. overflow-wrap - CSS: Folhas de Estilo em Cascata | MDN — Informações detalhadas sobre overflow-wrap da Mozilla.
3. Qual é a diferença entre "word-break: break-all" e "word-wrap: break-word" em CSS? - Stack Overflow — Uma discussão sobre as diferenças entre word-break e word-wrap.
4. Gerenciando Palavras Longas e URLs (Quebras Forçadas, Quebras Silábicas, Elipses, etc.) | CSS-Tricks — Dicas sobre como gerenciar textos longos em várias situações.
5. Módulo CSS Text Level 3 — O rascunho do módulo CSS Text Level 3 do W3C.

Video

Navigation