Come rimuovere il ritorno a capo automatico da textarea?

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

  •  19-08-2019
  •  | 
  •  

Domanda

la mia semplice textarea non mostra una barra orizzontale quando il testo trabocca. Avvolge il testo per una nuova riga. Quindi, come posso rimuovere il wordwrap e visualizzare la barra orizzontale quando il testo trabocca?

È stato utile?

Soluzione

Textareas non dovrebbe essere a capo per impostazione predefinita, ma puoi impostare wrap = " soft " per disabilitare esplicitamente il ritorno a capo: 

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

EDIT: " wrap " l'attributo non è ufficialmente supportato. L'ho preso dalla la pagina SELFHTML tedesca (una fonte inglese è qui ) che dice che IE 4.0 e Netscape 2.0 lo supportano. L'ho anche testato in FF 3.0.7 dove funziona come previsto. Le cose sono cambiate qui, SELFHTML ora è un wiki e il link alla fonte inglese è morto.

EDIT2: se vuoi essere sicuro che ogni browser lo supporti, puoi usare i CSS per cambiare il comportamento di avvolgimento:

  

Usando Cascading Style Sheets (CSS), puoi ottenere lo stesso effetto con   white-space: nowrap; overflow: auto;.   Pertanto, l'attributo a capo può essere considerato obsoleto.

Da qui (sembra essere una pagina eccellente con informazioni su textarea).

EDIT3: non sono sicuro quando sia cambiato (secondo i commenti, deve essere stato intorno al 2014), ma wrap ora è un attributo HTML5 ufficiale, vedi w3schools . Modificata la risposta in modo che corrisponda a questa.

Altri suggerimenti

textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowrap funziona anche se non ti interessa lo spazio bianco, ma ovviamente non lo vuoi se stai lavorando con codice (o paragrafi rientrati o qualsiasi contenuto in cui potrebbero esserci deliberatamente più spazi) .. quindi preferisco pre.

overflow-wrap: normal (era word-wrap nei browser meno recenti) è necessario nel caso in cui un genitore abbia modificato tale impostazione; può causare il wrapping anche se è impostato pre-wrap.

anche - contrariamente alla risposta attualmente accettata - le textareas esegui spesso vanno a capo automaticamente. <=> sembra essere l'impostazione predefinita sul mio browser.

La seguente soluzione basata su CSS funziona per me: 

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

Ho trovato il modo di creare un'area di testo con tutto questo allo stesso tempo:

  • Con barra di scorrimento orizzontale
  • Supporto di testo multilinea
  • Testo non a capo

Funziona bene su:

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

Lasciami spiegare come ci arrivo: stavo usando lo strumento integrato di inspector Chrome e ho visto i valori sugli stili CSS, quindi provo questi valori, anziché quelli normali ... trial & amp; errori finché non l'ho ridotto al minimo ed eccolo per chiunque lo desideri.

Nella sezione CSS ho usato solo questo per Chrome, Firefox, Opera e Safari: 

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

Nella sezione CSS ho usato solo questo per IE: 

textarea {
  overflow:scroll;
}

È stato un po 'complicato, ma c'è il CSS.

Un tag (x) HTML come questo: 

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

E alla fine della sezione <head> un JavaScript come questo: 

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

JavaScript serve a rendere il validatore W3C che passa XHTML 1.1 rigoroso, poiché l'attributo wrap non è ufficiale e quindi non può essere direttamente un tag (x) HTML, ma la maggior parte dei browser lo gestisce, quindi dopo aver caricato la pagina imposta quell'attributo .

Spero che questo possa essere testato su più browser e versioni e aiutare qualcuno a migliorarlo e renderlo completamente cross-browser per tutte le versioni.

Se puoi usare JavaScript, oggi potrebbe essere l'opzione più portatile (testato Firefox 31, Chrome 36):

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

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

Sembra che non ci sia una soluzione CSS standard portatile:

Inoltre, se puoi usare Javascript, puoi anche usare l'editor 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>

Probabilmente funziona con ACE perché non utilizza un contenteditable che non è specificato / implementato in modo incoerente, ma non è sicuro che sia utilizzato <=>.

Questa domanda sembra essere la più popolare per disabilitare textarea avvolgere. Tuttavia, a partire da aprile 2017 trovo che IE 11 (11.0.9600) non disabiliterà il ritorno a capo automatico con una delle soluzioni di cui sopra.

La unica soluzione che funziona per IE 11 è wrap="off". wrap="soft" e / o i vari attributi CSS come white-space: pre cambiano dove IE 11 sceglie di avvolgere ma si avvolge ancora da qualche parte. Tieni presente che l'ho provato con o senza Visualizzazione compatibilità . Internet Explorer 11 è abbastanza compatibile con HTML 5, ma non in questo caso.

Quindi, per ottenere linee che mantengano il loro spazio bianco e vadano dal lato destro che sto usando: 

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

Fortunatamente questo sembra funzionare in Chrome & amp; Anche Firefox. Non sto difendendo l'uso di pre-HTML 5 <=>, sto solo dicendo che sembra essere richiesto per IE 11.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top