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

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