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

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):

uma div com contenteditable="true"
os estilos sugeridos por Partly
Envio de formulário JavaScript no clique do botão: Como enviar um formulário usando javascript?

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:

wrap atributo não é padrão
white-space: pre;não funciona no Firefox 31 para textarea. Fiddle , solicitação de recurso aberto .

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