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

720

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?

Adambox
quelle

Antworten:

1009

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+ */
}
Adambox
quelle
7
white-space:pre-line;(und alle browserkompatiblen Varianten) scheint in einigen Fällen angemessener zu sein (z. B. ohne Tabulatoren), da dadurch der Platz am Zeilenanfang (falls vorhanden)
weggenommen wird
5
@MediaVince reduziert pre-linealle Leerzeichen (nicht nur am Anfang der Zeile). developer.mozilla.org/en-US/docs/Web/CSS/white-space enthält eine Tabelle, in der das Verhalten von white-spaceWerten zusammengefasst ist.
Paul
1
word-wrap: break-wordtut nicht das, wonach die Frage verlangt, sondern führt dazu, dass Zeilenumbrüche auch zwischen Wörtern auftreten. Sie können diese Zeile löschen. In modernen Browsern benötigen Sie keine -mozoder andere Präfixe.
Flimm
140

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

pre {
    white-space: pre-wrap;
}
Richard McKechnie
quelle
3
Dies liegt daran, dass es sich nur um CSS 3 handelt. Weitere Informationen zur Kompatibilität finden Sie in der Antwort von adambox.
Lorem Affe
60

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>
Mason240
quelle
3
Einfacher als die beliebte Antwort. Vielen Dank!
Ricky
4
In meinem Fall wollte ich vorformatierten Text anzeigen, der Registerkarten enthielt, um eine Tabelle zu erstellen. Ich habe Ihre Lösung verwendet. Außerdem habe ich eine Monspace-Schriftart hinzugefügt, damit alle Spalten ausgerichtet sind:style="white-space: pre-wrap; font-family:monospace;"
Januar
1
Während dies möglicherweise einfacher ist, kann die Verwendung <pre>für Codeblöcke einen höheren semantischen Wert haben .
Angelos Chalaris
2
Ich weiß, dass ich zu spät zu diesem Spiel komme, aber warum ist diese Lösung besser, als sie einmal im Stylesheet festzulegen? Ich habe mehrere Divs auf einem HTML-Ausgabebildschirm, die dies benötigen würden. Es scheint, als würde eine einzige Korrektur des Elements im Stylesheet alle Probleme beheben.
Webfrogs
1
@webfrogs Ja, eine .prewrap-Klasse zu erstellen wäre am besten.
Mason240
36

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 .

Erin Delacroix
quelle
20

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

word-break: keep-all;
user1433454
quelle
17

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.

ekerner
quelle
13
Wäre die Verwendung von Textbereichen für etwas anderes als die Eingabe nicht semantisch falsch? Scheint mir eine seltsame Lösung zu sein.
Josh M.
2
Nicht so semantisch falsch wie das Hinzufügen einer Reihe von Formatierungsstilen zu einem "pre" -Tag, wenn "pre" darauf hindeutet, dass der enthaltene Text vorformatiert ist und daher keine zusätzliche Formatierung erfordert und eher so wie er ist zu verwenden ist;) Ich schlage vor, dies nicht zu tun Geben Sie "Semantik" Vorrang vor "funktional".
ekerner
1
Ich denke, es <pre>hat keine semantische Bedeutung (im Gegensatz zu <code>), es bedeutet einfach, dass Zeilenumbrüche und mehrere Leerzeichen erhalten bleiben sollten.
Flimm
1
Es ist die Abkürzung für "vorformatiert". Sie schlagen vor, dass es eigentlich kurz für vorformatierte Zeilenumbrüche und mehrere Leerzeichen ist?
ekerner
Die Art des Inhalts soll abhängig von der Art des vorformatierten Textes durch ein inneres Tag angegeben werden. Ich würde meine Freunde auf die w3c Pre-Tag-Wiki-Seite verweisen
joshperry
14

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>
vovahost
quelle
13

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.

Bobby Jack
quelle
Oh, danke für die Überlauferinnerung! Ideal für mobile Displays.
XTL
6

Versuchen Sie es mit

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

Oder besser CSS werfen.

Eduardo Campañó
quelle
Dieser scheint in IE 7 zu funktionieren, aber nicht in 6. Dies ist der einzige Vorschlag, der für IE vielversprechend schien ... alle anderen Vorschläge waren gut für andere Browser ...
Topwik
Nevermind muss ein Browser-Caching gewesen sein. IE 6 neu gestartet und alles ist gut. Prost.
Topwik
2
Das Problem bei dieser Lösung ist, dass sie auch Zeilenumbrüche auflöst ... ZB geht jede Trennung von Text in Absätze verloren.
Chris W.
4

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.

FryingggPannn
quelle
3

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>
Feacco
quelle
Hat super
7
xmp ist seit HTML 3.2 veraltet, wurde vollständig aus HTML5 entfernt und hat anfangs nie richtig funktioniert. Es wurde nicht konsistent zwischen den verschiedenen Browsern implementiert.
PeterToTheThird
Verwenden von Leerzeichen: Pre-Wrap; und Zeilenumbruch: Umbruchwort; In meinem CSS wird die Einrückung von (JSON-) Snippets beibehalten. Die Vorzeile entfernt dies. (Chrome)
Peter Visser
1

Folgendes hat mir geholfen:

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

Vielen Dank

prashant2402
quelle
3
Ich denke, es ist besser zu verwenden, white-space: pre-wrap;weil es Leerzeichen respektiert
Ivan Ferrer Villa
-1

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.

rob_st
quelle
Es wird lediglich die Tatsache angegeben, dass es möglich ist, Text innerhalb eines Pre-Tags automatisch zu verpacken, obwohl es nicht die Absicht des Pre-Tags ist, automatisch zu verpacken.
Rob_st
Dies ist die einzig richtige Antwort auf die Frage des Autors. Jede andere Antwort oder mögliche "Lösung" fördert den Missbrauch des <pre> -Elements. Wenn Sie den Typ in ein <pre> -Element einfügen und umbrechen möchten, verwenden Sie stattdessen ein <p> -Tag und formatieren Sie es mit einer CSS-Klasse nach Ihren Wünschen.
Markus
Ich bin mir nicht sicher, warum die Leute es hilfreich finden, diese Art von Rat zu geben: "Ich bin schlauer als du". Nein, ein <p> -Tag ist kein geeigneter Ersatz: Es werden weder Leerzeichen noch Zeilenumbrüche beibehalten. Ein <pre> -Tag ist nützlich, um Zeilenumbrüche beizubehalten. Manchmal muss jedoch ein zusätzlicher Zeilenumbruch hinzugefügt werden, so wie jeder Code-Editor Zeilenumbrüche beibehalten und lange Zeilen umbrechen kann.
dwk