A maneira mais elegante de forçar um elemento TEXTAREA a quebrar a linha, *independentemente* do espaço em branco
-
09-06-2019 - |
Pergunta
Os elementos HTML Textarea são agrupados apenas quando atingem um espaço ou caractere de tabulação.Tudo bem, até que o usuário digite uma palavra muuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuita.Estou procurando uma maneira de impor estritamente quebras de linha (por exemplo:mesmo que resulte em "loooooooooooo oooooooooong").
O melhor que descobri foi adicionar um espaço unicode de largura zero após cada letra, mas isso interrompe as operações de copiar e colar.Alguém sabe de uma maneira melhor?
Observação:Estou me referindo ao elemento "textarea" aqui (ou seja:aquele que se comporta de forma semelhante a uma entrada de texto) - não apenas um simples bloco de texto.
Solução
As configurações de CSS word-wrap:break-word
e text-wrap:unrestricted
parecem ser recursos do CSS 3.Boa sorte em encontrar uma maneira de fazer isso nas implementações atuais.
Outras dicas
- quirksmode.org tem um visão geral de vários métodos.
- Há uma questão SO relacionada: "Em HTML, como quebrar palavras em um travessão?"
- Em navegadores que suportam isso,
word-wrap: break-word
também pode dar o efeito desejado.
Quebrando palavras longas no tamanho da largura da área de texto:
1) para navegadores modernos:
textarea { word-break: break-all; }
2) para compatibilidade com o IE8, adicione:
textarea { -ms-word-break: break-all; }
https://msdn.microsoft.com/en-us/library/ms531184%28v=vs.85%29.aspx
3) adicionar hack de compatibilidade do IE11:
A quebra de linha do Internet Explorer 11 não está funcionando
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, textarea { white-space: pre; }
}
Este código está funcionando bem:
-IE 11, Chrome 51, Firefox 46 (Windows 7);
-IE 8, Chrome 49, Firefox 18 (Windows XP);
-Edge 12.10240, Opera 30 (Windows 10);
Existe o elemento não padrão wbr que é suportado pelo menos
Raposa de fogo, http://developer.mozilla.org/En/HTML/Element
Internet Explorer, http://msdn.microsoft.com/en-us/library/ms535917(VS.85).aspx
e Ópera.
Eu testei o <wbr>, ​ e técnicas.Todos os três funcionaram bem no IE 7, Firefox 3 e Chrome.
O único que não quebrou o copiar/colar foi o <wbr> marcação.
De acordo com meus testes, apenas o Firefox apresenta o comportamento descrito entre os navegadores atuais.Então acho que sua melhor aposta é aguardar o lançamento iminente do Firefox 3.1 para resolver seu problema :)
A maneira mais elegante é usar wrap="soft"
para embrulhar palavras inteiras ou wrap="hard"
para embrulhar por personagem ou wrap="off"
por não embrulhar o último wrap="off"
muitas vezes não é necessário tão automaticamente que o navegador usa automaticamente como se fosse wrap="off"
.
EXEMPLO:
<textarea name="tbox" cols="24" rows="4" wrap="soft"></textarea>