Wie füge ich Text in ein Pre-Tag ein?

pre Tags sind sehr nützlich für Codeblöcke in HTML und zum Debuggen von Ausgaben beim Schreiben von Skripten. Wie kann ich den Text in Zeilenumbrüche umwandeln, anstatt eine lange Zeile auszudrucken?

Die Antwort von dieser Seite in CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Dies funktioniert hervorragend, um Text zu preumbrechen und Leerzeichen innerhalb des -Tags beizubehalten:

pre {
    white-space: pre-wrap;
}

Ich habe festgestellt, dass das Überspringen des Pre-Tags und die Verwendung von Leerzeichen: Pre-Wrap auf einem Div eine bessere Lösung ist.

 <div style="white-space: pre-wrap;">content</div>

Kurz gesagt, dies zwingt den Inhalt dazu, sich in ein "Pre" -Tag einzuschließen, ohne Wörter zu brechen. Prost!

pre {
  white-space: pre-wrap;
  word-break: keep-all
}

Siehe Live - Beispiel hier .

Das brauchte ich. Es verhinderte das Brechen von Wörtern, ermöglichte jedoch eine dynamische Breite im Vorbereich.

word-break: keep-all;

Ich schlage vor, das Pre zu vergessen und es einfach in einen Textbereich zu legen.

Ihr Einzug bleibt bestehen und Ihr Code wird nicht mitten auf einem Pfad oder so in Worte gefasst.

Die Auswahl des Textbereichs in einem Textbereich ist einfacher, wenn Sie in die Zwischenablage kopieren möchten.

Das Folgende ist ein PHP-Auszug. Wenn Sie also nicht in PHP sind, variiert die Art und Weise, wie Sie die HTML-Sonderzeichen verpacken.

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

Informationen zum Kopieren von Text in die Zwischenablage in js finden Sie unter: Wie kopiere ich in JavaScript in die Zwischenablage? .

Jedoch...

Ich habe gerade die Stackoverflow-Codeblöcke überprüft und sie werden in ein <code> -Tag eingeschlossen, das in ein <pre> -Tag mit CSS eingeschlossen ist ...

code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

Auch der Inhalt der Stackoverflow-Codeblöcke wird mithilfe der Syntax (glaube ich) http://code.google.com/p/google-code-prettify/ hervorgehoben .

Es ist ein schönes Setup, aber ich gehe jetzt nur mit Textbereichen.

Ich habe @richelectron- und @ user1433454-Antworten kombiniert.
Es funktioniert sehr gut und behält die Textformatierung bei.

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>

Du kannst entweder:

pre { white-space: normal; }

um die Monospace-Schriftart beizubehalten, aber Zeilenumbruch hinzuzufügen, oder:

pre { overflow: auto; }

Dies ermöglicht eine feste Größe mit horizontalem Bildlauf für lange Zeilen.

Versuchen Sie es mit

<pre style="white-space:normal;">. 

Oder besser CSS werfen.

Verwenden Sie white-space: pre-wrapund einige Präfixe für den automatischen Zeilenumbruch in pres.

Nicht verwenden, word-wrap: break-wordda dies natürlich nur ein Wort in zwei Hälften bricht, was Sie wahrscheinlich nicht wollen.

Der beste Cross-Browser-Weg hat für mich funktioniert, um Zeilenumbrüche zu erhalten und genauen Code oder Text anzuzeigen : (Chrome, Internet Explorer, Firefox)

CSS:

xmp{ white-space:pre-wrap; word-wrap:break-word; }

HTML:

<xmp> your text or code </xmp>

Folgendes hat mir geholfen:

pre {
    white-space: normal;
    word-wrap: break-word;
}

Vielen Dank

Das <pre>-Element steht für "vorformatierter Text" und soll die Formatierung des Textes (oder was auch immer) zwischen seinen Tags beibehalten. Daher ist es eigentlich nicht beabsichtigt, automatische Zeilenumbrüche oder Zeilenumbrüche innerhalb des <pre>-Tags zu haben

Text in einem Element wird in einer Schriftart mit fester Breite (normalerweise Courier) angezeigt und behält sowohl Leerzeichen als auch Zeilenumbrüche bei .

Quelle: w3schools.com , betont von mir gemacht.