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?

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