Horizontale Schriftrolle des HTML-Textbereichs

77

Ich möchte einen horizontalen Bildlauf zu einem Textbereich in meiner HTML-Seite bereitstellen. Die Schriftrolle sollte ohne Umbruch angezeigt werden, wenn ich eine lange Zeile ohne Zeilenumbruch eingebe. Einige Freunde schlugen vor, das CSS-Attribut overflow-y zu verwenden, was bei mir nicht funktionierte. Die Browser, die ich benutze, sind IE 6+ und Mozilla 3+.

html textarea word-wrap Shyam
quelle
2
<textarea wrap="off"></textarea>
Adarsh ​​Madrecha

Antworten:

49

Um keine Umhüllung festzulegen, würden Sie Folgendes verwenden:

white-space: nowrap;

Für andere Werte: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

HINWEIS: Die Abschreibung wrap="off"scheint jedoch die einzige Möglichkeit für die Unterstützung älterer Browser zu sein. Obwohl es nicht HTML 5-kompatibel ist, ist es immer noch meine Präferenz, wenn Sie alle Browser ansprechen.

Aram Kocharyan
quelle
9
Das funktioniert nicht. Der gesamte Text, einschließlich mehrerer Zeilen, wird in dieselbe Zeile eingefügt, nicht das gewünschte Verhalten.
Herr TA
21
Um neue Zeilen richtig zu sehen, müssen Sie verwenden white-space: pre;.
Jesse
98

Ich habe herausgefunden, dass dies nicht W3c-kompatibel ist, und es funktioniert sowohl im IE als auch in Firefox und im Übrigen auch in Chrome.

Ich habe das Attribut wrapmit Wert hinzugefügt off, <textarea cols=80 rows=12 wrap='off'>das habe ich getan.

Shyam
quelle
Der richtige Weg, dies zu tun, ist über CSS, wie die Antwort von Aram Kocharyan hervorhebt . offist kein gültiger oder anerkannter Wert des <textarea>Attributs wrap.
Jesse
17

Wenn Sie vorformatierten Text haben, der LFs enthält, sollten Sie ihn white-space: pre;dem CSS hinzufügen . Dadurch bleiben die neuen Zeilen erhalten, die bereits im Text enthalten sind, und es werden keine langen Zeilen umbrochen.

Dies funktioniert in allen Versionen von Firefox, allen Webkit-basierten Browsern und IE6 +.

Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Azdle
quelle
6

Probiere diese:

overflow: scroll; 
overflow-y: scroll; 
overflow-x: scroll; 
overflow:-moz-scrollbars-vertical;

Es sollte auch eine -moz-Bildlaufleiste-horizontal geben

Filip Ekberg
quelle