Wie entferne ich den Zeilenumbruch aus dem Textbereich?

146

In meinem einfachen Textbereich wird kein horizontaler Balken angezeigt, wenn Text überläuft. Es wird Text für eine neue Zeile umgebrochen. Wie entferne ich den Zeilenumbruch und zeige die horizontale Leiste an, wenn der Text überläuft?

html textarea word-wrap Steinherz
quelle
Meinst du auf HTML? Schwingen? etwas anderes?
ksuralta
HTML-Tag hinzugefügt, um diese Verwirrung zu vermeiden, aber ich rate nur anhand der aktuellen Antworten.
Sergio Acosta

Antworten:

142

Textbereiche sollten nicht standardmäßig umbrochen werden, aber Sie können wrap = "soft" festlegen, um den Umbruch explizit zu deaktivieren:

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

BEARBEITEN: Das Attribut "Wrap" wird nicht offiziell unterstützt. Ich habe es von der deutschen SELFHTML-Seite erhalten (eine englische Quelle ist hier ), die besagt, dass IE 4.0 und Netscape 2.0 es unterstützen. Ich habe es auch in FF 3.0.7 getestet, wo es wie angenommen funktioniert. Hier haben sich die Dinge geändert, SELFHTML ist jetzt ein Wiki und der englische Quelllink ist tot.

EDIT2: Wenn Sie sicher sein möchten, dass jeder Browser dies unterstützt, können Sie CSS verwenden, um das Wrap-Verhalten zu ändern:

Mit Cascading Style Sheets (CSS) können Sie den gleichen Effekt erzielen white-space: nowrap; overflow: auto;. Somit kann das Wrap-Attribut als veraltet angesehen werden.

Von hier aus (scheint eine ausgezeichnete Seite mit Informationen über Textbereich zu sein).

EDIT3: Ich bin nicht sicher, wann es sich geändert hat (laut den Kommentaren muss es um 2014 gewesen sein), aber es wrapist jetzt ein offizielles HTML5-Attribut, siehe w3schools . Die Antwort wurde entsprechend geändert.

Schnaader
quelle
9
Das Attribut "wrap" funktioniert in Firefox 3.6, ist jedoch in HTML5 nicht gültig. Die CSS-Lösung funktioniert jedoch nicht, als würde "white-space: nowrap" ignoriert.
Clint Pachl
9
white-space: pre;(oder pre-line/ pre-wrap) hatte den gleichen wrap="off"white-space: nowrappadding
Effekt
5
@ClintPachl Eigentlich wrapist HTML5 gültig ... seine Einstellungen sind jetzt "hard"und "soft"( ref )
Mottie
4
@Mottie Es wäre viel besser, auf die aktuelle Version der HTML5-Spezifikation zu verlinken als auf Mozilla-Dokumente. Hier ist der Link für die aktuelle Version - w3.org/TR/2014/CR-html5-20140731/forms.html#attr-textarea-wrap
Piotr Dobrogost
2
wrap="off"ist nicht mehr gültig, ist jedoch sowohl für IE als auch für Edge erforderlich!
Jools
161 
textarea {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: scroll;
}

white-space: nowrapfunktioniert auch, wenn Sie sich nicht für Leerzeichen interessieren, aber das möchten Sie natürlich nicht, wenn Sie mit Code arbeiten (oder eingerückten Absätzen oder Inhalten, bei denen absichtlich mehrere Leerzeichen vorhanden sein könnten) ... also bevorzuge ich pre.

overflow-wrap: normal(war word-wrapin älteren Browsern) wird benötigt, falls ein Elternteil diese Einstellung geändert hat; Dies kann zu einem Umbruch führen, selbst wenn dieser festgelegt preist.

auch - im Gegensatz zu der derzeit akzeptierten Antwort - Textfelder Sie wickeln oft standardmäßig. pre-wrapscheint die Standardeinstellung in meinem Browser zu sein.

Teilweise wolkig
quelle
18
Mit FF 20 benötigen Sie immer noch wrap = "off" im HTML-Textarea-Tag! Diese Technologie ist so inkonsistenter Mist.
Lawrence Dol
3
+1 für die Bereitstellung einer CSS-Lösung und den Hinweis, dass Textbereiche standardmäßig umbrochen werden
YePhIcK
1
Ah, es scheint eine Feature-Anfrage für Firefox aus dem Jahr 2001 zu geben, aber mit einigen aktuellen (2014) unterstützenden Kommentaren zum Chrome-Verhalten von Entwickler Ehsan Akhgari: bugzilla.mozilla.org/show_bug.cgi?id=82711 . Geh und stimme zu!
Ciro Santilli 法轮功 冠状 病 六四 事件 28
1
Dies funktioniert jetzt in Firefox (Aurora-Kanal, Version 36 ) - siehe jsfiddle.net/mlhDevelopment/gvjy14xu im grünen Textbereich.
mlhDev
2
Ich persönlich denke , es ist besser, zu ersetzen overflow-x: scrollmit overflow: auto. Die Bildlaufleisten reduzieren den verfügbaren Eingabebereich im Textbereich. Außerdem hat IE11 eine vertikale Bildlaufleiste unnötigerweise auf Ihre Weise gerendert, diese jedoch overflow: autobehoben.
Sam
19

Die folgende CSS-basierte Lösung funktioniert für mich:

<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
quelle
15

Ich habe einen Weg gefunden, mit all dem, was gleichzeitig funktioniert, einen Textbereich zu erstellen:

  • Mit horizontaler Bildlaufleiste
  • Unterstützung von mehrzeiligem Text
  • Text wird nicht umbrochen

Es funktioniert gut auf:

  • Chrome 15.0.874.120
  • Firefox 7.0.1
  • Opera 11.52 (1100)
  • Safari 5.1 (7534,50)
  • IE 8.0.6001.18702

Lassen Sie mich erklären, wie ich dazu komme: Ich habe das in Chrome Inspector integrierte Tool verwendet und Werte für CSS-Stile gesehen. Daher versuche ich diese Werte anstelle der normalen ... Versuch und Irrtum, bis ich sie auf ein Minimum reduziert habe und hier ist für jeden, der es will.

Im CSS-Bereich habe ich genau dies für Chrome, Firefox, Opera und Safari verwendet:

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

Im CSS-Bereich habe ich genau dies für IE verwendet:

textarea {
  overflow:scroll;
}

Es war ein bisschen schwierig, aber es gibt das CSS.

Ein (x) HTML-Tag wie folgt:

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

Und am Ende des <head>Abschnitts ein JavaScript wie dieses:

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

Das JavaScript dient dazu, den W3C-Validator XHTML 1.1 Strict zu übergeben, da das Wrap-Attribut nicht offiziell ist und daher kein (x) HTML-Tag direkt sein kann, aber die meisten Browser damit umgehen. Nach dem Laden der Seite wird dieses Attribut festgelegt.

Hoffe, dass dies auf mehr Browsern und Versionen getestet werden kann und jemandem hilft, es zu verbessern, und es für alle Versionen vollständig browserübergreifend macht.

z666zz666z
quelle
4
+1 .wrap = 'off' ist die Magie, die den Trick in FF 14.0.1 gemacht hat ... Danke.
Shanimal
Das JavaScript scheint unter Safari 5.0.6 (letzte PPC-Version) nicht zu funktionieren, obwohl Sie im HTML wrap = "off" verwenden können.
.wrap hat es mit Chrome für mich getan. Ich habe es auch in Verbindung mit dem No-Wrap in CSS verwendet.
MineAndCraft12
wrap = 'off' hat den IE dazu gebracht, sich wie die anderen Browser zu verhalten.
Rand Scullard
4

Diese Frage scheint die beliebteste zum Deaktivieren von textareaWrap zu sein. Doch ab April 2017 Ich finde , dass IE 11 (11.0.9600) wird nicht deaktivieren Zeilenumbruch mit einem der oben genannten Lösungen.

Die einzige Lösung, die für IE 11 funktioniert, ist wrap="off". wrap="soft"und / oder die verschiedenen CSS-Attribute wie white-space: prealter, bei denen IE 11 das Umschließen wählt, es aber immer noch irgendwo umschließt. Beachten Sie, dass ich dies mit oder ohne Kompatibilitätsansicht getestet habe . IE 11 ist ziemlich HTML 5-kompatibel, aber in diesem Fall nicht.

Um Linien zu erzielen, die ihre Leerzeichen behalten und von der rechten Seite abweichen, verwende ich:

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

Glücklicherweise scheint dies auch in Chrome & Firefox zu funktionieren. Ich verteidige nicht die Verwendung von Pre-HTML 5 wrap="off", sondern sage nur, dass es für IE 11 erforderlich zu sein scheint.

JonBrave
quelle
Schön, hat mir den Tag gerettet! Ich habe mir den Kopf gebrochen, warum das programmgesteuerte Hinzufügen von Zeilenumbrüchen mit dem Code aus der akzeptierten Antwort fehlgeschlagen ist.
Tum
1
Dieser IE-Fehler wurde auch auf Edge
Jools
3

Wenn Sie JavaScript verwenden können, ist Folgendes möglicherweise die derzeit portabelste Option (getestetes 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>

Es scheint keine tragbare CSS-Standardlösung zu geben:

Wenn Sie Javascript verwenden können, können Sie auch den ACE-Editor verwenden:

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>

Funktioniert wahrscheinlich mit ACE, da es keine verwendet, die nicht textareaspezifiziert / inkohärent implementiert ist, aber nicht sicher ist, ob sie verwendet wird contenteditable.

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