web-dev-qa-db-fra.com

Comment supprimer Word Wrap de textarea?

mon textarea simple ne montre pas une barre horizontale lorsque le texte déborde. Il enveloppe le texte pour une nouvelle ligne. Alors, comment puis-je supprimer le retour automatique à la ligne et afficher la barre horizontale lorsque le texte déborde?

htmltextareaword-wrap
134
StoneHeart

Textareas ne devrait pas encapsuler par défaut, mais vous pouvez définir wrap = "soft" pour désactiver explicitement wrap:

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

EDIT: l'attribut "wrap" n'est pas officiellement supporté. Je l’ai obtenue de la page allemande SELFHTML (une source anglaise est ici ) qui indique IE 4.0 et Netscape 2.0 le prennent en charge. Je testé dans FF 3.0.7 où il fonctionne comme supposé. Les choses ont changé ici, SELFHTML est maintenant un wiki et le lien source en 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 du wrap:

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.

From here (semble être une excellente page avec des informations sur textarea).

EDIT3: Je ne sais pas quand cela a changé (selon les commentaires, ça devait être autour de 2014), mais wrap est maintenant un attribut HTML5 officiel, voir w3schools . Changé la réponse pour correspondre à cela.

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

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

overflow-wrap: normal (était Word-wrap dans les anciens navigateurs) est nécessaire au cas où un parent aurait modifié ce paramètre; cela peut provoquer un retour à la ligne même si pre est défini.

aussi - contrairement à la réponse actuellement acceptée - textareas do souvent envelopper par défaut. pre-wrap semble être la valeur par défaut de mon navigateur.

145
Partly Cloudy

La solution basée sur 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>
18
Galghamon

J'ai trouvé un moyen de faire une textarea avec tout ce travail en même temps:

  • Avec barre de défilement horizontale
  • Prise en charge de texte multiligne
  • Le texte n'est pas enveloppant

Cela fonctionne bien sur:

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

Permettez-moi de vous expliquer comment y arriver: j'utilisais Chrome et j'ai vu les valeurs sur les styles CSS, alors j'essaie ces valeurs plutôt que les normales ... essai et erreurs jusqu'à ce que Je l'ai réduit au minimum et le voici pour tous ceux qui le souhaitent.

Dans la section CSS, je l’utilisais 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 du <head> section un JavaScript comme ceci:

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

Le code JavaScript permet au validateur du W3C de passer 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. 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, aider quelqu'un à l'améliorer et le rendre totalement cross-browser pour toutes les versions.

13
z666zz666z

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

La solution seulement qui fonctionne pour IE 11 est wrap="off". wrap="soft" et/ou les différents attributs CSS tels que white-space: pre alter where IE 11 choisit d’emballer mais il encapsule quelque part. Notez que j’ai testé avec ou sans vue de compatibilité. IE 11 est assez compatible HTML 5, mais pas dans ce cas.

Ainsi, pour obtenir des lignes qui conservent leurs espaces et sortent du côté droit, j'utilise:

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

Heureusement, cela semble fonctionner dans Chrome & Firefox aussi. Je ne défends pas l’utilisation du pré-HTML 5 wrap="off", en disant simplement que cela semble être nécessaire pour IE 11.

3
JonBrave

Si vous pouvez utiliser JavaScript, les options suivantes pourraient être l'option la plus portable à ce jour (testé avec 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 semble n'y avoir aucune solution CSS portable standard:

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 pas de textarea qui est sous-spécifié/implémenté de manière incohérente, mais ne sait pas s’il utilise contenteditable.

3
Ciro Santilli 新疆改造中心996ICU六四事件