A maneira mais elegante de forçar um elemento TEXTAREA a quebrar a linha, *independentemente* do espaço em branco

StackOverflow https://stackoverflow.com/questions/47817

  •  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").

alt text

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.

Foi útil?

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

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>, &#8203; 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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top