[HTML/CSS] Zeilenumbruch im DIV Container deaktivieren

Fluid Byte · Beitrag von **Fluid Byte** » 18.10.2007 12:44

Ich bastel gearde an einem PHP-basierten CodeParser für PB Quelltexte. Ich möchte also den Zeilenumbruch (wie in der PB IDE) deaktivieren. Hierfür verwende ich einen DIV Container weil ich zusätzlich Syntax-Highlighting mit einbauen will.

Ich könnte eine Textarea Formular Element benutzen wo man den Zeilenumbruch explizit deaktivieren kann, dann würde aber das farbliche Hervorheben nicht mehr funktionieren (es sei denn es wird .RTF ünterstützt).

Hier mal eine Beispiel:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
		.codebox {
			padding: 5px;
			width: 340px;
			height: 200px;
			border: solid 1px #CCC;
			font-family: Courier, monospace;
			font-size: 12px;
			overflow: auto;
		}
	</style>
</head>

<body>
	<b>DIV Container:</b><br />
	<div class="codebox">
		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.<br />
		Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br />
		At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.<br />
		Takimata sanctus est Lorem ipsum dolor sit amet.
	</div>
	<br />
	<b>Textarea Form Element:</b><br />
	<textarea name="textarea" wrap="off" class="codebox">Dies ist ein sinnloser Testsatz der nicht umbrochen wird...</textarea>	
</body>
</html>

edel · Beitrag von **edel** » 18.10.2007 12:54

Code: Alles auswählen

white-space:nowrap;

Fluid Byte · Beitrag von **Fluid Byte** » 18.10.2007 12:58

Oh Gott, danke...

AND51 · Beitrag von **AND51** » 18.10.2007 15:10

Möglicherweise beitet sich bei dir aber auch das <PRE> Tag an.
Bei diesem Tag brauchst du gar keine <BR>-Tags mehr, der Text wird exakt nur dann umgebrochen, wenn ein Chr(10)+Chr(13) gefunden wid.
Der andere Vorteil ist aber, dass Tabs und Leerzeichen exakt eingehalten werden; rückt also jemand seinen Code mit 5 Leerzeichen ein, werden auch 5 Leerzeichen dargestellt; ansonsten wandeln Brwoser mehrere aufeinanderfolgende Leerzeichen immer in 1 Leerzeichen um.

Fluid Byte · Beitrag von **Fluid Byte** » 18.10.2007 17:59

Wow! Noch nie benutzt scheint aber recht nützlich. Danke für den Tipp! Bild

AND51 · Beitrag von **AND51** » 18.10.2007 19:17

Kein Problem.

Übrigebns: WIe schon erwähnt, wenn ich folgendes schreibe:

Code: Alles auswählen

Fluid       Byte

dann wie gesagt wandelt der Browser mehrere Leerzeichen in eines um. Das kann entweder mit <PRE> verhindert werden, oder aber auch mit dem sogenannten Entities. Diese kennst du sicher schon:
  -> Leerzeichen
ä -> ä
Ä -> Ä
· -> Malnehmen
½ -> 1/2 (als richtiges, kleines zeichen)
¾ -> 3/4
> -> spitze Klammer zu >
< -> spitze Klammer auf <
...

Die letzten beiden sind nützlich, wenn du beispielsweise HTML-Befehle erklären oder schlecht gesicherte Gästebuücher lahmlegen willst [img]thttp://codedreality.purearea.net/temp/smilies/01.gif[/img]
Denn sie werden vom Browser als Zeichen dargestellt und nicht als Befehl interpretiert; außerdem kann man so HTML-Tags in Gästebücher einschleusen, die nicht über entsprehende Sicherheitsmaßnahmen verfügen.

Zurück zum Thema, bevor ich abschweife: Das   erzwingt ein Leerzeichen. 'nbsp' steht für 'no break space'; es erzeugt Leerzeichen, die im Bedarfsfall aber nicht vom Browser umgebrochen werden dürfen. Außerdem erzwingt ein   immer ein Leerzeichen.
Während obiger Code in ein Leerzeichen umgewandelt wird, wird folgender Code

Code: Alles auswählen

Fluid&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Byte

so dargestellt

Code: Alles auswählen

Fluid      Byte

Die Leerzeichen, die aus einem   resultieren, werden also nicht umgewandelt. Außerdem, wenn ganz rechts, kurz vorm Bildschirmrand 'Fluid' stehen würde und dann ein normales Leerzeichen " " und dann 'Byte', dann würde der brwoser 'Byte' in die nächste Zeile schreiben. Bei Leerzeichen, die aus   resultieren, tut der Browser das nicht.

Seeehr lange Rede, kurzer Sinn: Falls du später mal vom <PRE>-tag abweichen willst/musst (warum auch imemr), dann kannst du die Einrückungen eines PB-Codes immernoch mit   realisieren.

Übrigens: Es wäre sogar sicherer, < und > durch die Entities > und < zu ersetzen, denn diese Zeichen kommen z. B. in PureBasic bei If-Abfragen vor, aber auch beim Shiften << und >>.