2013-08-20 26 views
6

Ich muss eine Reihe von Text auf einer HTML-Seite anzeigen. Der Text sieht etwa wie folgt aus:Html-Anzeige formatierten Text

+-001 This is a Line   00:12:04 
    002 ---------------------------------- 
- 003 Everthing looks good so far ------ 

Der Text ist „vorformatiert“ und enthält eine Menge von Whit Leerzeichen und Bindestriche und jede Zeile hat die gleiche Länge (alle Zeichen die gleiche Breite).

Gibt es eine Möglichkeit, den Text in HTML anzuzeigen, ohne das Format zu verlieren?

+0

geben Sie einen Leerraum: pre für die Eltern div. Es sollte die Whitespaces erhalten. Weißt du, ob es Tags '<' or '>' oder einen Backslash '/' enthält? – palerdot

Antwort

15

Fügen Sie Ihren Text innerhalb des Tags <pre> ein.

JSFiddle

<pre> 
+-001 This is a Line   00:12:04 
    002 ---------------------------------- 
- 003 Everthing looks good so far ------ 
</pre> 
5

Der HTML-Weg ist, die pre element, zu verwenden, die für eine solche Nutzung entwickelt wurde, aber Vorsicht, dass

  • auf der sicheren Seite bei der Formatierung zu sein, setzen Sie das <pre> Tag gleich zu Beginn des erste Zeile und das </pre> Tag direkt am Ende der letzten Zeile. Andernfalls verhalten sich einige Browser so, als ob am Anfang oder am Ende des Elements eine leere Zeile wäre.
  • Sie müssen noch Vorkommen der Zeichen < und & in den Inhalt zu entkommen (es gibt einige Fälle, in denen dies nicht erforderlich ist, aber es ist am einfachsten, das zu ignorieren.

Beispiel (wo ich hinzugefügt haben, ein Zeile mit dem Ausdruck 1 + 1 < 3): kann

<pre>+-001 This is a Line   00:12:04 
    002 ---------------------------------- 
- 003 Everthing looks good so far ------ 
- 004 Simple as 1 + 1 &lt; 3   ------</pre> 

Sie vermeiden < und & von xmp statt pre Flucht verwenden, aber xmp hat de worden Clared veraltet, veraltet und was auch immer (aber es funktioniert gut in der Praxis).

<xmp>+-001 This is a Line   00:12:04 
    002 ---------------------------------- 
- 003 Everthing looks good so far ------ 
- 004 Simple as 1 + 1 < 3   ------</xmp> 
Verwandte Themen