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?
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?
Réponses:
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 wrap
est maintenant un attribut HTML5 officiel, voir w3schools . Changé la réponse pour correspondre à cela.
white-space: pre;
(ou pre-line
/ pre-wrap
) avait le même effet que wrap="off"
pour moi (alors white-space: nowrap
qu'il ne respectait pas le padding
)
wrap="off"
n'est plus valide, mais c'est une exigence pour IE et Edge!
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 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-wrap
dans 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 pre
est défini.
aussi - contrairement à la réponse actuellement acceptée - les zones de texte sont souvent enveloppées par défaut. pre-wrap
semble être la valeur par défaut sur mon navigateur.
overflow-x: scroll
par 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: auto
corrigé.
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>
J'ai trouvé un moyen de créer une zone de texte avec tout cela fonctionnant en même temps:
Cela fonctionne bien sur:
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.
Cette question semble être la plus populaire pour désactiver l' textarea
enroulement. 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: pre
alter 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.
Si vous pouvez utiliser JavaScript, ce qui suit pourrait être l'option la plus portable aujourd'hui (testé 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>
Il ne semble pas y avoir de solution CSS standard et portable:
wrap
l'attribut n'est pas standard
white-space: pre;
ne fonctionne pas pour Firefox 31 pour textarea
. Fiddle , demande de fonctionnalité ouverte .
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 textarea
ni l'autre qui est sous-spécifié / implémenté de manière incohérente, mais pas sûr s'il est utilisé contenteditable
.