Problemas com quebra de linha em CSS

Mais um post de dica rápida, mas bem valiosa – pelo menos pra mim foi BASTANTE!!

Quem nunca teve problemas com quebra de linha? Colocamos um texto mais longo dentro de uma DIV ou de um P e o comportamento que esperamos é do texto sendo quebrado quando está para sair da caixa do elemento pai. Contudo, alguma vezes o texto sai da caixa como na imagem abaixo.

Texto sem quebra
Texto sem quebra

Quebrei a cabeça pra descobrir que quando um texto tem no lugar de espaços em branco normais o nosso “amigo”   – que expressa um espaço em branco em caracteres especiais do HTML – ele considera que o texto é uma “palavra” só, toda amarrada com o  . Por isso ele escapa da caixa e fica com esse comportamento horrível! Levei 4h para descobrir isso, gastas entre pesquisas no Google e tentativa e erro tirando algumas partes do código.

Então, se retirar os   de seu texto e deixar espaços em branco normais, o texto se quebra normalmente!

texto-com-quebra
Texto com quebra