Wie bringe ich Text in einem Pre-Tag unter?

Question

pre Tags sind sehr nützlich für Codeblöcke in HTML und zum Debuggen von Ausgaben beim Schreiben von Skripten, aber wie bringe ich den Text dazu, umzubrechen, anstatt eine lange Zeile auszudrucken?

Answer 1

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

Die Einrückung bleibt erhalten, und Ihr Code wird nicht in der Mitte eines Pfades oder ähnlichem umbrochen.

Es ist auch einfacher, einen Textbereich in einem Textbereich auszuwählen, wenn Sie ihn in die Zwischenablage kopieren möchten.

Das Folgende ist ein php-Auszug, wenn Sie also nicht in php arbeiten, wird die Art und Weise, wie Sie die html-Sonderzeichen verpacken, variieren.

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

Informationen zum Kopieren von Text in die Zwischenablage in js finden Sie hier: Wie kann ich in JavaScript in die Zwischenablage kopieren? .

Aber...

Ich habe mir gerade die Stackoverflow-Codeblöcke angesehen und sie sind in einem <code>-Tag verpackt, der in einem <pre>-Tag mit css verpackt 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;
}

Außerdem wird der Inhalt der Stackoverflow-Codeblöcke syntaktisch hervorgehoben, indem (ich glaube) http://code.google.com/p/google-code-prettify/ .

Es ist eine nette Einrichtung, aber Im nur gehen mit textareas für jetzt.

Answer 2

Das ist es, was ich brauchte. Es hielt die Wörter vom Brechen ab und ermöglichte eine dynamische Breite im Vorspannbereich.

word-break: keep-all;

Answer 3

Sie können entweder:

pre { white-space: normal; }

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

pre { overflow: auto; }

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

Answer 4

使用方法 white-space: pre-wrap und Herstellerpräfixe für den automatischen Zeilenumbruch innerhalb pre s.

Nicht verwenden word-wrap: break-word denn dadurch wird ein Wort einfach in zwei Hälften geteilt, was Sie wahrscheinlich nicht wollen.

Answer 5

Versuchen Sie es mit

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

Oder werfen Sie besser CSS.