Come rimuovere il ritorno a capo automatico da textarea?

146

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?

html textarea word-wrap

— Cuore di pietra
fonte

Intendi in HTML? Swing? qualcos'altro?

— ksuralta,

Aggiunto tag HTML per evitare quella confusione, ma sto solo indovinando dalle risposte attuali.

— Sergio Acosta,

142

Textareas non dovrebbe essere a capo automaticamente, ma puoi impostare wrap = "soft" per disabilitare esplicitamente wrap:

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

EDIT: l'attributo "wrap" non è ufficialmente supportato. L'ho preso dalla 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 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 è cambiato (secondo i commenti, deve essere stato intorno al 2014), ma wrapora è un attributo HTML5 ufficiale, vedi w3schools . Modificata la risposta per corrispondere a questa.

— schnaader
fonte

9

L'attributo "a capo" funziona in Firefox 3.6, ma non è HTML5 valido. Tuttavia, la soluzione CSS non funziona, come se "white-space: nowrap" fosse ignorato.

— Clint Pachl,

9

white-space: pre;(o pre-line/ pre-wrap) ha avuto lo stesso effetto che wrap="off"ho avuto per me (mentre white-space: nowrapnon ha rispettato padding)

— philfreo,

5

@ClintPachl In realtà, wrapè HTML5 valido ... le sue impostazioni sono ora "hard"e "soft"( ref )

— Mottie

4

@Mottie Sarebbe molto meglio collegarsi alla versione corrente delle specifiche HTML5 piuttosto che ai documenti di Mozilla. Ecco il link per la versione corrente - w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap

— Piotr Dobrogost,

2

wrap="off"non è più valido, tuttavia è necessario sia per IE che per Edge!

— Jools

161

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

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

overflow-wrap: normal(era word-wrapnei browser meno recenti) è necessario nel caso in cui alcuni genitori abbiano modificato tale impostazione; può causare il confezionamento anche sepre è impostato.

anche - in contrasto con la risposta attualmente accettato - textareas fanno spesso avvolgono per impostazione predefinita. pre-wrapsembra essere l'impostazione predefinita sul mio browser.

— Parzialmente nuvoloso
fonte

18

Con FF 20, hai ancora bisogno di wrap = "off" nel tag textarea html! Questa tecnologia è così incoerente.

— Lawrence Dol,

3

+1 per aver fornito una soluzione CSS e precisando che le textareas si avvolgono per impostazione predefinita

— YePhIcK

1

Ah, sembra che ci sia una richiesta di funzionalità su Firefox dal 2001 ma con alcuni recenti (2014) commenti di supporto per il comportamento di Chrome da parte del dev Ehsan Akhgari: bugzilla.mozilla.org/show_bug.cgi?id=82711 . Vai e votalo!

— Ciro Santilli 28 冠状病六四事件法轮功

1

Questo ora funziona in Firefox (canale Aurora, v36) - vedi jsfiddle.net/mlhDevelopment/gvjy14xu la textarea verde.

— mlhDev

2

Personalmente, penso che sia meglio sostituirlo overflow-x: scrollcon overflow: auto. Le barre di scorrimento riducono lo spazio di digitazione disponibile nell'area di testo. Inoltre, IE11 ha reso inutilmente una barra di scorrimento verticale a modo tuo, ma l'ha overflow: autoriparata.

— Sam,

19

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>

— Galghamon
fonte

15

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 di Chrome e ho visto i valori sugli stili CSS, quindi provo questi valori, invece di quelli normali ... prove ed errori fino a quando non l'ho ridotto al minimo e qui è per chiunque lo voglia.

Nella sezione CSS ho usato proprio 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 <head>sezione un JavaScript come questo:

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

JavaScript serve a rendere XHTML 1.1 Strict validatore W3C, poiché l'attributo wrap non è ufficiale e quindi non può essere un tag HTML (x) direttamente, 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.

— z666zz666z
fonte

4

+1 .wrap = 'off' è la magia che ha fatto il trucco in FF 14.0.1 ... Grazie.

— Shanimal,

Sembra che JavaScript non funzioni su Safari 5.0.6 (ultima versione PPC), anche se è possibile utilizzare wrap = "off" nell'HTML.

.wrap è quello che ha fatto per me, usando Chrome. L'ho anche usato insieme al no-wrap in css.

— MineAndCraft12

wrap = 'off' ha fatto sì che IE si comportasse come gli altri browser.

— Rand Scullard,

4

Questa domanda sembra essere la più popolare per disabilitare l' textareainvolucro. Tuttavia, ad aprile 2017 trovo che IE 11 (11.0.9600) non disabiliterà il ritorno a capo automatico con nessuna delle soluzioni sopra.

L' unica soluzione che funziona per IE 11 è wrap="off". wrap="soft"e / o i vari attributi CSS come white-space: prealter dove IE 11 sceglie di avvolgere ma si avvolge ancora da qualche parte. Si noti che ho provato questo 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, sto usando:

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

Fortunatamente questo sembra funzionare anche su Chrome e Firefox. Non sto difendendo l'uso di pre-HTML 5wrap="off" , solo dicendo che sembra essere richiesto per IE 11.

— JonBrave
fonte

Bello, mi ha salvato la giornata! Stavo spaccando la testa perché l'aggiunta programmatica di nuove righe non è riuscita utilizzando il codice dalla risposta accettata.

— Tum

1

Questo bug di IE è stato anche trasferito su Edge

— Jools il

3

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

un div con contenteditable="true"
gli stili proposti da parzialmente
Invio del modulo JavaScript al clic del pulsante: come inviare un modulo utilizzando javascript?

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:

wrap l'attributo non è standard
white-space: pre;non funziona per Firefox 31 per textarea. Violino , richiesta di funzionalità aperta .

Inoltre, se puoi usare Javascript, potresti 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 textareauno dei quali non è specificato / implementato in modo incoerente, ma non è sicuro che sia utilizzato contenteditable.

— Ciro Santilli 郝海东冠状病六四事件法轮功
fonte