Comment supprimer le retour à la ligne de textarea?

146

ma zone de texte simple n'affiche pas de barre horizontale lorsque le texte déborde. Il enveloppe le texte pour une nouvelle ligne. Alors, comment puis-je supprimer le wordwrap et afficher la barre horizontale lorsque le texte déborde?

html textarea word-wrap Cœur de pierre
la source
Voulez-vous dire sur HTML? Balançoire? autre chose?
ksuralta
Ajout d'une balise HTML pour éviter cette confusion, mais je ne fais que deviner par les réponses actuelles.
Sergio Acosta

Réponses:

142

Les zones de texte ne doivent pas être enveloppées par défaut, mais vous pouvez définir wrap = "soft" pour désactiver explicitement l'enroulement:

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

EDIT: l'attribut "wrap" n'est pas officiellement pris en charge. Je l'ai obtenu sur la page allemande SELFHTML (une source en anglais est ici ) qui indique que IE 4.0 et Netscape 2.0 le supportent. Je l'ai également testé dans FF 3.0.7 où il fonctionne comme prévu. Les choses ont changé ici, SELFHTML est maintenant un wiki et le lien source anglais est mort.

EDIT2: Si vous voulez être sûr que tous les navigateurs le prennent en charge, vous pouvez utiliser CSS pour changer le comportement de wrapping:

En utilisant les feuilles de style en cascade (CSS), vous pouvez obtenir le même effet avec white-space: nowrap; overflow: auto;. Ainsi, l'attribut wrap peut être considéré comme obsolète.

De là (semble être une excellente page avec des informations sur textarea).

EDIT3: Je ne sais pas quand cela a changé (selon les commentaires, doit avoir été autour de 2014), mais wrapest maintenant un attribut HTML5 officiel, voir w3schools . Changé la réponse pour correspondre à cela.

Schnaader
la source
9
L'attribut «wrap» fonctionne dans Firefox 3.6, mais n'est pas valide en HTML5. Cependant, la solution CSS ne fonctionne pas, comme si "white-space: nowrap" était ignoré.
Clint Pachl
9
white-space: pre;(ou pre-line/ pre-wrap) avait le même effet que wrap="off"pour moi (alors white-space: nowrapqu'il ne respectait pas le padding)
philfreo
5
@ClintPachl En fait, wrapest valide HTML5 ... ses paramètres sont maintenant "hard"et "soft"( ref )
Mottie
4
@Mottie Il serait bien préférable de créer un lien vers la version actuelle de la spécification HTML5 plutôt que vers la documentation de Mozilla. Voici le lien pour la version actuelle - w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap
Piotr Dobrogost
2
wrap="off"n'est plus valide, mais c'est une exigence pour IE et Edge!
Jools
161 
textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowrapfonctionne également si vous ne vous souciez pas des espaces, mais bien sûr, vous ne le voulez pas si vous travaillez avec du code (ou des paragraphes en retrait ou tout contenu où il pourrait délibérément y avoir plusieurs espaces) ... donc je préfère pre.

overflow-wrap: normal(était word-wrapdans les navigateurs plus anciens) est nécessaire au cas où un parent aurait changé ce paramètre; cela peut provoquer un enroulement même s'il preest défini.

aussi - contrairement à la réponse actuellement acceptée - les zones de texte sont souvent enveloppées par défaut. pre-wrapsemble être la valeur par défaut sur mon navigateur.

Partiellement nuageux
la source
18
Avec FF 20, vous avez toujours besoin de wrap = "off" dans la balise textarea html! Cette technologie est une merde incohérente.
Lawrence Dol
3
+1 pour avoir fourni une solution CSS et souligné que les zones de texte
DOIVENT être
1
Ah, il semble y avoir une demande de fonctionnalité sur Firefox à partir de 2001, mais avec quelques commentaires récents (2014) sur le comportement de Chrome par le développeur Ehsan Akhgari: bugzilla.mozilla.org/show_bug.cgi?id=82711 . Allez voter!
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
1
Cela fonctionne maintenant dans Firefox (canal Aurora, v36) - voir jsfiddle.net/mlhDevelopment/gvjy14xu la zone de texte verte.
mlhDev
2
Personnellement, je pense qu'il vaut mieux remplacer overflow-x: scrollpar overflow: auto. Les barres de défilement réduisent l'espace de saisie disponible dans la zone de texte. En outre, IE11 a rendu une barre de défilement verticale inutilement avec votre chemin, mais l'a overflow: autocorrigé.
Sam
19

La solution CSS suivante fonctionne pour moi:

<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
la source
15

J'ai trouvé un moyen de créer une zone de texte avec tout cela fonctionnant en même temps:

  • Avec barre de défilement horizontale
  • Prise en charge du texte multiligne
  • Texte non enveloppant

Cela fonctionne bien sur:

  • Chrome 15.0.874.120
  • Firefox 7.0.1
  • Opéra 11,52 (1100)
  • Safari 5.1 (7534,50)
  • IE 8.0.6001.18702

Laissez-moi vous expliquer comment j'y parviens: j'utilisais l'outil intégré de l'inspecteur Chrome et j'ai vu des valeurs sur les styles CSS, alors j'essaie ces valeurs, au lieu des valeurs normales ... essai et erreurs jusqu'à ce que je les réduise au minimum et le voici est pour tous ceux qui le veulent.

Dans la section CSS, j'ai utilisé ceci pour Chrome, Firefox, Opera et Safari:

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

Dans la section CSS, j'ai utilisé ceci pour IE:

textarea {
  overflow:scroll;
}

C'était un peu délicat, mais il y a le CSS.

Une balise (x) HTML comme celle-ci:

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

Et à la fin de la <head>section un JavaScript comme celui-ci:

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

Le JavaScript sert à rendre le validateur W3C passant XHTML 1.1 Strict, car l'attribut wrap n'est pas officiel et ne peut donc pas être une balise HTML (x) directement, mais la plupart des navigateurs le gèrent, donc après le chargement de la page, il définit cet attribut.

J'espère que cela pourra être testé sur plus de navigateurs et de versions et aidera quelqu'un à l'améliorer et le rendra entièrement multi-navigateur pour toutes les versions.

z666zz666z
la source
4
+1 .wrap = 'off' est la magie qui a fait l'affaire dans FF 14.0.1 ... Merci.
Shanimal
Le JavaScript ne semble pas fonctionner sur Safari 5.0.6 (dernière version PPC), même si vous pouvez utiliser wrap = "off" dans le HTML.
.wrap est ce qui l'a fait pour moi, en utilisant Chrome. Je l'ai également utilisé en conjonction avec le no-wrap en css.
MineAndCraft12
wrap = 'off' a fait qu'IE se comporte comme les autres navigateurs.
Rand Scullard
4

Cette question semble être la plus populaire pour désactiver l' textareaenroulement. Cependant, à partir d'avril 2017, je constate qu'IE 11 (11.0.9600) ne désactivera pas le retour à la ligne avec l'une des solutions ci-dessus.

La seule solution qui fonctionne pour IE 11 est wrap="off". wrap="soft"et / ou les divers attributs CSS comme white-space: prealter où IE 11 choisit d'envelopper mais il s'enroule toujours quelque part. Notez que j'ai testé cela avec ou sans affichage de compatibilité . IE 11 est assez compatible HTML 5, mais pas dans ce cas.

Ainsi, pour obtenir des lignes qui conservent leur espace blanc et partent du côté droit, j'utilise:

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

Fortuitement, cela semble également fonctionner dans Chrome et Firefox. Je ne défends pas l'utilisation du pré-HTML 5 wrap="off", je dis simplement que cela semble être nécessaire pour IE 11.

JonBrave
la source
Nice one, a sauvé ma journée! Je me suis cassé la tête sur les raisons pour lesquelles l'ajout de nouvelles lignes par programme a échoué en utilisant le code de la réponse acceptée.
Tum
1
Ce bogue IE a également été transféré vers Edge
Jools
3

Si vous pouvez utiliser JavaScript, ce qui suit pourrait être l'option la plus portable aujourd'hui (testé 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>

Il ne semble pas y avoir de solution CSS standard et portable:

De plus, si vous pouvez utiliser Javascript, vous pouvez également utiliser l'éditeur 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>

Fonctionne probablement avec ACE car il n'utilise ni l'un textareani l'autre qui est sous-spécifié / implémenté de manière incohérente, mais pas sûr s'il est utilisé contenteditable.

Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
la source