Comment supprimer word wrap de textarea ?

Question

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

Answer 1

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

white-space: nowrap fonctionne également si vous n'avez pas de soins sur les espaces, mais bien sûr, vous ne voulez pas que si vous travaillez avec le code (ou en retrait de paragraphes ou de tout contenu où il pourrait être délibérément plusieurs espaces) ... donc je préfère pre.

word-wrap: normal est nécessaire dans le cas où un parent a changé du milieu; elle peut causer de l'emballage même si pre est réglé.

aussi, contrairement à la actuellement accepté de répondre -- textareas faire souvent envelopper par défaut. pre-wrap semble être la valeur par défaut sur mon navigateur.

Answer 2

Ces zones de texte ne devrait pas envelopper par défaut, mais vous pouvez définir wrap="off" pour désactiver explicitement wrap:

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

EDIT: Le "wrap" attribut n'est pas officiellement pris en charge. Je l'ai eu à partir de l'allemand SELFHTML page (une source en anglais est ici) qui dit que IE 4.0 et Netscape 2.0. J'ai aussi testé en FF 3.0.7 où il fonctionne comme le suppose.

EDIT2: Si vous voulez être certain que chaque navigateur le permet, vous pouvez utiliser les CSS pour modifier l'envelopper de comportement:

À l'aide de Feuilles de Style en Cascade (CSS), vous pouvez obtenir le même effet avec white-space: nowrap; overflow: auto;. Ainsi, l'écharpe attribut peut être considéré comme obsolète.

À partir d' ici (semble être une excellente page avec des informations sur textarea).

Answer 3

Le CSS suivant selon la solution fonctionne pour moi :

Answer 4

J'ai trouvé un moyen de faire un textarea avec tout cela à la fois:

• Avec la barre de défilement horizontal
• L'appui de texte multiligne
• Texte pas wraping

Il 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'arrive à ça: j'ai été en utilisant Chrome inspertor outil intégré et j'ai vu des valeurs de styles CSS, j'ai donc essayer que des valeurs, au lieu de la normale... d'essais et d'erreur jusqu'a obtenu ité, donc finalement je l'ai réduit au minimum et ici, il est pour toute personne qui veut ça.

Sur la section CSS j'ai profité de ce pour Chrome, Firefox, Opera et Safari:

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

Sur la section CSS j'ai profité de ce pour IE:

textarea{
 overflow:scroll;
}

C'était un peu délicat, mais là, c'est le CSS.

Un (x)HTML de la balise comme ceci:

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

Et sur la fin de la section de la tête un JavaScript comme ceci:

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

Le JavaScript est pour faire le validateur du W3C en passant XHTML 1.1 Strict, car wrap attribut n'est pas officiel ne peut pas être sur (x)HTML tag directement, mais la plupart des navigateurs en occuper, donc après le chargement de la page, il définit l'attribut.

J'espère que cela peut être testé sur plusieurs navigateurs et versions et de l'aide de quelqu'un pour l'améliorer et le rend totalement cross-browser pour toutes les versions.