Off topic de formulários, mas é importante !!!!!
Já aconteceu com você de o texto de um container não ficar numa linha só nem fodendo?
E te recomendarem
- word-break
- white-space
- overflow-wrap(?)
Segue o fio e bora entender de uma vez por todas pq isso acontece -> 🧵
Primeira coisa, provavelmente seu problema não tem nada a ver com nenhuma dessas 3 propriedades.
Quebra de linha no HTML é que nem sexo anal
Se quebrou, ou você tá colocando errado ou só não cabia mesmo
Se você não relar o dedo no elemento, o valor padrão da width dele será "auto"
A width de "auto" primeiro faz a soma da largura total do seu conteúdo + border + margin + padding (só left e right nesse caso)
Se a soma disso for menor que o espaço disponível, a width vai ocupar td
MAS se for menor que o espaço disponível, ela vai procurar oportunidades de soft wrap (ou quebra fofo), ela visa caracteres de espaço (U+0020) e sinalizadores de quebra de linha (U+000D), que é o que provavelmente decidiu por você que seu texto não cabe em 1 linha só
Isso é um problema de width que pode ser resolvido com intrinsic-sizing!
A propriedade max-content vai dizer que o container tem que ser no mínimo do tamanho do conteúdo.
Eu falo bem mais detalhadamente nesse meu artigo sobre intrinsic sizing
dev.to/lixeletto/alem-das-unidades-css-intrinsic-sizing-e-responsividade-gl
Mas e essas propriedades que eu citei no começo do post?
Elas usam da engine do navegador que lida com espaço em branco.
Whitespace (pra ser curto) é de extrema importância pro navegador - ele mantem as tabulações da sua identação, espaço entre palavras, mas...
Se você escreve algo como exemplo abaixo com espaçamento escagalhado, ele interpreta corretamente os espaços que ele tem que deletar.
Daqui pra baixo é nerdagem, então TL:DR
Essas propriedades chupinham da lógica de quebra de espaço do navegador
🤍white-space
Quando o Whitespace é delimitado pra elementos inline (texto, spans, etc), o navegador cria um contexto específico pra eles chamado Inline Formatting Context (vou chamar de IFC)
O IFC calcula as quebras de espaço e tbm coordena eixo de leitura (text-orientation)
O calculo do IFC tá descrito nessa imagem e pode ser encontrado na seguinte documentação
developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace#how_does_css_process_whitespace
Estava em inglês, traduzi usando o designMode do navegador, é tipo um contenteditable. Não sabe o que é isso? Leia essa thread do @omariosouto
twitter.com/omariosouto/status/1653356007391649794?s=20
O whitespace usa isso pra calcular as "soft wrap opportunities" que são espaços e tabs, mas também quebras de palavras se a propriedade `hyphens: auto;` estiver presente pro elemento.
Essa propriedade aplica hífen em quebras de palavras de acordo com o atributo lang do seu HTML
Quais são os valores aceitos por essa propriedade?
MDN mais uma vez explica melhor do que eu:
developer.mozilla.org/pt-BR/docs/Web/CSS/white-space#valores
🗾word-break
Define como o navegador vai calcular o agrupamento de caracteres, quais são quebráveis por hyphens ou soft wrap opportunities, especialmente necessário em caracteres CJK (Chinese, Japanese, Korean)
Seus valores são normal, keep-all e break-all
normal é... bem lkkkkk do jeito que tá
keep-all não permite quebra nenhuma pra caracteres CKJ, mas age como normal pra outros caracteres
break-all, vai inserir quebra em qualquer espaço entre caracteres, mesmo CKJ
⛔overflow-wrap
Ele não cuida do espaço em branco, nem dos soft wraps e hifenações entre palavras.
Ele cuida da lógica que o container pai usa pra decidir se as palavras dentro dele devem quebrar de linha ou não
É o MESMO algoritmo que intrinsic sizing utiliza!!!!
Os seus valores são
normal, anywhere e break-word
normal
é o comportamento normal - quebra em soft wraps se o texto não couber no container
anywhere
Vai quebrar TODAS as palavras em soft wraps, e na ausência deles só vai quebrar msm, e sem hífen!!!
Já o break-word (antigamente valor da propriedade word-break!!)
Vai funcionar que nem o anywhere MAS vai manter palavras na mesma linha se elas couberem.
Eles funcionam mais ou menos como
width: max-content, min-content e fit-content, respectivamente;
E por hoje é isso!
Essa definitivamente vai virar artigo pois tem MUITA coisa interessante que precisei deixar de lado.
E ai, vocês já tiveram esse tipo de problema? Como resolveram?
Espero que tenha ajudado algumas pessoas a chutar menos!