it-swarm.com.de

Wie binde ich Text in ein Pre-Tag ein?

pre -Tags sind sehr nützlich für Codeblöcke in HTML und zum Debuggen der Ausgabe beim Schreiben von Skripten. Wie kann ich den Text jedoch in Word umbrechen, anstatt eine lange Zeile auszudrucken?

648
adambox

Die Antwort von diese 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+ */
}
922
adambox

Dies funktioniert hervorragend, um Text umzubrechen und Leerzeichen innerhalb des pre- -Tags beizubehalten:

pre{
    white-space: pre-wrap;
}
120
richelectron

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>
55
Mason240

Das habe ich gebraucht. Es verhinderte das Brechen von Wörtern, ließ jedoch eine dynamische Breite im Vorbereich zu.

Word-break: keep-all;
20
user1433454

Kurz gesagt, dies zwingt den Inhalt dazu, sich innerhalb eines "Pre" -Tags zu befinden, ohne Wörter zu brechen. Prost!

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

Siehe Live-Beispiel hier .

18
Erin Delacroix

Ich schlage vor, das Pre zu vergessen und es einfach in ein Textfeld zu legen.

Ihre Einrückung bleibt erhalten und Ihr Code wird nicht mitten in einem Pfad oder etwas in Worte gefasst.

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

Das Folgende ist ein PHP-Auszug. Wenn Sie also nicht mit PHP arbeiten, variiert die Art und Weise, wie Sie die HTML-Sonderzeichen packen.

<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 eingebunden, das in ein <pre> -Tag mit CSS eingebunden 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 von (glaube ich) http://code.google.com/p/google-code-prettify/ syntaktisch hervorgehoben.

Es ist ein nettes Setup, aber ich arbeite gerade mit Textareas.

16
ekerner

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>
14
vovahost

Du kannst entweder:

pre { white-space: normal; }

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

pre { overflow: auto; }

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

13
Bobby Jack

Versuchen Sie es mit

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

Oder besser CSS werfen.

7

The Best Cross Browser Way hat bei mir 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>
4
feacco

Folgendes hat mir geholfen:

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

Vielen Dank

2
prashant2402