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?
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?
Risposte:
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 wrap
ora è un attributo HTML5 ufficiale, vedi w3schools . Modificata la risposta per corrispondere a questa.
white-space: pre;
(o pre-line
/ pre-wrap
) ha avuto lo stesso effetto che wrap="off"
ho avuto per me (mentre white-space: nowrap
non ha rispettato padding
)
wrap="off"
non è più valido, tuttavia è necessario sia per IE che per Edge!
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 il 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 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-wrap
sembra essere l'impostazione predefinita sul mio browser.
overflow-x: scroll
con 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: auto
riparata.
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:
Funziona bene su:
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.
Questa domanda sembra essere la più popolare per disabilitare l' textarea
involucro. 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: pre
alter 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.
Se puoi usare JavaScript, la seguente potrebbe essere l'opzione più portatile oggi (testato Firefox 31, Chrome 36):
contenteditable="true"
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 textarea
uno dei quali non è specificato / implementato in modo incoerente, ma non è sicuro che sia utilizzato contenteditable
.