Como remover quebra de linha da área de texto?

146

minha área de texto simples não mostra uma barra horizontal quando o texto é excedido. Envolve o texto para uma nova linha. Então, como removo o wordwrap e exibo a barra horizontal quando o texto é excedido?

html textarea word-wrap Coração de pedra
fonte
Você quer dizer em HTML? Balanço? algo mais?
ksuralta
Adicionada tag HTML para evitar essa confusão, mas estou apenas adivinhando pelas respostas atuais.
Sergio Acosta

Respostas:

142

As áreas de texto não devem ser quebradas por padrão, mas você pode definir wrap = "soft" para desativar explicitamente a quebra:

<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>

EDIT: O atributo "wrap" não é oficialmente suportado. I got it from a página SELFHTML alemão (uma fonte Inglês é aqui ) que diz IE 4.0 e Netscape 2.0 suporte de TI. Também testei no FF 3.0.7, onde funciona como deveria. As coisas mudaram aqui, o SELFHTML agora é um wiki e o link da fonte em inglês está morto.

EDIT2: Se você quiser ter certeza de que todos os navegadores o suportam, use o CSS para alterar o comportamento de quebra automática:

Usando Cascading Style Sheets (CSS), você pode conseguir o mesmo efeito com white-space: nowrap; overflow: auto;. Portanto, o atributo wrap pode ser considerado desatualizado.

A partir daqui (parece ser uma excelente página com informações sobre a área de texto).

EDIT3: Não sei ao certo quando foi alterado (de acordo com os comentários, deve ter sido por volta de 2014), mas wrapagora é um atributo oficial do HTML5, consulte w3schools . A resposta foi alterada para corresponder a isso.

schnaader
fonte
9
O atributo "wrap" funciona no Firefox 3.6, mas não é HTML5 válido. No entanto, a solução CSS não funciona, como se "espaço em branco: nowrap" fosse ignorado.
Clint Pachl
9
white-space: pre;(ou pre-line/ pre-wrap) tiveram o mesmo efeito como wrap="off"para mim (enquanto white-space: nowrapnão respeitou a padding)
philfreo
5
@ClintPachl Na verdade, wrapé HTML5 válido ... É definições estão agora "hard"e "soft"( ref )
Mottie
4
@Ottie Seria muito melhor vincular à versão atual da especificação HTML5 do que aos documentos da Mozilla. Aqui está o link para a versão atual - w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap
Piotr Dobrogost
2
wrap="off"não é mais válido, no entanto, é um requisito para o IE e o Edge!
Jools
161 
textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowraptambém funciona se você não se importa com espaço em branco, mas é claro que não deseja que esteja trabalhando com código (ou parágrafos recuados ou qualquer conteúdo em que possa haver deliberadamente vários espaços) ... então prefiro pre.

overflow-wrap: normal(estava word-wrapem navegadores mais antigos) é necessário caso algum pai tenha alterado essa configuração; isso pode causar quebra mesmo que preesteja definido.

também - ao contrário da resposta atualmente aceita - textareas que muitas vezes envolver por padrão. pre-wrapparece ser o padrão no meu navegador.

Parcialmente nublado
fonte
18
Com o FF 20, você ainda precisa de wrap = "off" na tag html textarea! Essa tecnologia é uma porcaria tão inconsistente.
Lawrence Dol
3
+1 por fornecer uma solução CSS e apontar que as áreas de
texto são agrupadas
1
Ah, parece haver uma solicitação de recurso no Firefox a partir de 2001, mas com alguns comentários recentes (2014) de suporte ao comportamento do Chrome por dev Ehsan Akhgari: bugzilla.mozilla.org/show_bug.cgi?id=82711 . Vá e vote!
Ciro Santilli publicou 28/08/14
1
Isso agora funciona no Firefox (canal Aurora, v36) - consulte jsfiddle.net/mlhDevelopment/gvjy14xu a área de texto verde.
mlhDev
2
Pessoalmente, eu acho que é melhor para substituir overflow-x: scrollcom overflow: auto. As barras de rolagem reduzem o espaço de digitação disponível na área de texto. Além disso, o IE11 processou desnecessariamente uma barra de rolagem vertical, mas a overflow: autocorrigiu.
Sam
19

A seguinte solução baseada em CSS funciona para mim:

<html>
 <head>
  <style type='text/css'>
   textarea {
    white-space: nowrap;
    overflow:    scroll;
    overflow-y:  hidden;
    overflow-x:  scroll;
    overflow:    -moz-scrollbars-horizontal;
   }
  </style>
 </head>
 <body>
  <form>
   <textarea>This is a long line of text for testing purposes...</textarea>
  </form>
 </body>
</html>
Galghamon
fonte
15

Eu encontrei uma maneira de fazer uma área de texto com tudo isso funcionando ao mesmo tempo:

  • Com barra de rolagem horizontal
  • Suporte a texto multilinha
  • O texto não está quebrando

Funciona bem em:

  • Chrome 15.0.874.120
  • Firefox 7.0.1
  • Opera 11.52 (1100)
  • Safari 5.1 (7534.50)
  • IE 8.0.6001.18702

Deixe-me explicar como eu cheguei a isso: eu estava usando a ferramenta integrada do Chrome inspector e vi valores nos estilos CSS; portanto, experimentei esses valores, em vez dos normais ... tentativas e erros até que eu o reduzisse ao mínimo e aqui está é para quem quer.

Na seção CSS, usei exatamente isso para Chrome, Firefox, Opera e Safari:

textarea {
  white-space:nowrap;
  overflow:scroll;
}

Na seção CSS, usei exatamente isso para o IE:

textarea {
  overflow:scroll;
}

Foi um pouco complicado, mas existe o CSS.

Uma tag (x) HTML como esta:

<textarea id="myTextarea" rows="10" cols="15"></textarea>

E no final da <head>seção, um JavaScript como este:

 window.onload=function(){
   document.getElementById("myTextarea").wrap='off';
 }

O JavaScript é para tornar o validador W3C passando XHTML 1.1 Strict, já que o atributo wrap não é oficial e, portanto, não pode ser uma tag HTML (x) diretamente, mas a maioria dos navegadores lida com isso, portanto, depois de carregar a página, ele define esse atributo.

Espero que isso possa ser testado em mais navegadores e versões e ajudar alguém a melhorá-lo e torná-lo totalmente cross-browser para todas as versões.

z666zz666z
fonte
4
+1 .wrap = 'off' é a mágica que fez o truque no FF 14.0.1 ... Obrigado.
2119 Shanimal
O JavaScript parece não funcionar no Safari 5.0.6 (última versão do PPC), mesmo que você possa usar wrap = "off" no HTML.
.wrap é o que fez por mim, usando o Chrome. Eu também usei em conjunto com o no-wrap em css.
MineAndCraft12 31/01
wrap = 'off' fez o IE se comportar como os outros navegadores.
Rand Scullard
4

Essa pergunta parece ser a mais popular para desativar o textareawrap. No entanto, em abril de 2017, acho que o IE 11 (11.0.9600) não desativará a quebra de linha com nenhuma das soluções acima.

A única solução que funciona para o IE 11 é wrap="off". wrap="soft"e / ou os vários atributos CSS, como white-space: prealter, onde o IE 11 escolhe quebrar, mas ele ainda está em algum lugar. Observe que eu testei isso com ou sem o Modo de Exibição de Compatibilidade . O IE 11 é bastante compatível com HTML 5, mas não neste caso.

Assim, para obter linhas que retêm seus espaços em branco e saem do lado direito, estou usando:

<textarea style="white-space: pre; overflow: scroll;" wrap="off">

Felizmente, isso também parece funcionar no Chrome e Firefox. Não estou defendendo o uso do pré-HTML 5 wrap="off", apenas dizendo que parece ser necessário para o IE 11.

JonBrave
fonte
Nice, salvou o meu dia! Estava me incomodando por que a adição de novas linhas de forma programática falhou ao usar o código da resposta aceita.
24518 Tum
1
Este bug do IE também foi transferido para o Edge
Jools
3

Se você pode usar JavaScript, talvez seja a opção mais portátil hoje em dia (Firefox 31, Chrome 36 testado):

http://jsfiddle.net/cirosantilli/eaxgesoq/

<style>
  div#editor {
    white-space: pre;
    word-wrap: normal;
    overflow-x: scroll;
  }
<style>
<div contenteditable="true"></div>

Parece não haver uma solução CSS portátil padrão:

Além disso, se você pode usar Javascript, também pode usar o editor do ACE:

http://jsfiddle.net/cirosantilli/bL9vr8o8/

<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<div id="editor">content</div>
<script>
  var editor = ace.edit('editor')
  editor.renderer.setShowGutter(false)
</script>

Provavelmente funciona com o ACE porque ele não usa um textareados quais é subespecificado / implementado incoerentemente, mas não tem certeza se é usado contenteditable.

Ciro Santilli adicionou uma nova foto
fonte