white-space: nowrap; und tabulatoren

[TecEye]

Hy also ich hab folgendes Problem, ich hab eine Textbox, da kommt html rein, also wird mit tabulatoren gearbeitet (\t) des weiteren will ich aber auch dass die zeilen nicht automatisch umbrechen, da ich zeilennummern einbauen will, aber sobald ich white-space: nowrap; benutze funktionieren die Tabs nicht mehr, jemand ne Idee wieso, bzw ne Lösung ?

 

[mikdoe]

mach mal bitte ein fiddle davon

 

[TecEye]

https://jsfiddle.net/hzoq8xk3/

 

[kkapsner]

white-space: pre;

 

[TecEye]

macht leider keinen Unterschied kkapsner https://jsfiddle.net/hzoq8xk3/1/
dann brechen die zeilen wieder um

 

[jspit]

Bei einen ähnlichen Problem hab ich die Tabs einfach durch eine bestimmte (feste) Anzahl Leerzeichen ersetzt.

 

[kkapsner]

Du willst also, dass die Tabulatoren beachtet werden, aber die eingefügten Zeilenumbrüche nicht? Denn automatisch wird mit pre gar nichts umgebrochen, sondern nur die Zeilenumbrüche, die du auch eingegeben hast...

Der Ansatz von jspit funktioniert aber nur mit   und nicht mit normalen Leerzeichen.

 

[jspit]

Ich bin wohl irrtümlich davon ausgegangen, das die Textbox ein textarea ist und TecEye dort HTML-Sourcecode darstellen möchte.

 

[TecEye]

@jspit: nein kein Irrtum, genau so ist es
kkapsner: doch die eingefügten Zeilenumbrüche schon aber wie du in meiner neuen fiddle siehst bricht auch pre automatisch um :/

 

[kkapsner]

In welchem Browser? In meinem FF nicht.

 

[jspit]

Mein Chrome (V48) nimmt wohl nicht nur tabs am Zeilenanfang weg, sondern auch führende Leerzeichen.

Hier kommt ein Text
mit Absatz
und eine Zeile mit Tab
und eine Zeile mit 4xSpace
aber diesmal mit word-wrap

Im FF nicht.

Hier kommt ein Text
mit Absatz
	und eine Zeile mit Tab
    und eine Zeile mit 4xSpace
aber diesmal mit word-wrap

(normale Leerzeichen reichen in einem Textarea, hilft hier aber auch nicht).

Edit: Hab noch das hier gefunden, was so aussieht, als wirkt es auch im Chrome:

textarea{
	width:150px;
	height:100px;
  overflow-x:scroll;
}
.mit{
  white-space: pre;
  word-wrap: normal;
}

 

[TecEye]

Sorry, hab die Browserangabe vergessen, Ja genau, im Chrome danke jspit, das funktioniert https://jsfiddle.net/hzoq8xk3/5/
gut zu wissen!