Text in <pre>-Tags wird standardmäßig nicht umbrochen. Sehen Sie sich zum Beispiel das folgende Code-Schnipsel an! Wenn dies Layoutprobleme verursacht, besteht eine Lösung darin, dem Pre-Block die Eigenschaft `overflow` zu geben, um den überschüssigen Inhalt auszublenden oder scrollbar zu machen. Die andere Lösung ist, ihn umbrechen zu lassen.
/* Browser specific (not valid) styles to make preformatted text wrap */
pre {
white-space: pre-wrap; /* css-3 */
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+ */
}
Funktioniert o-pre-wrap auch in Opera 8, 9 und 10?
Und was ist mit Webkit-Browsern? (Ich hoffe aufrichtig, dass sie die CSS3-Deklaration selbst unterstützen.)
Nach all der Google-Suche, die ich durchführen möchte, ist dies die einzige Lösung, die überall auftaucht. Sie scheint ziemlich veraltet zu sein…
funktioniert nicht in Opera 10 und IE8
Demo-Links scheinen für diesen Artikel kaputt zu sein.
wow, es funktioniert einwandfrei. Vielen Dank. Ich habe nur die folgenden zwei Codes hinzugefügt, aber es funktioniert. Ist das in Ordnung?
white-space: pre-wrap;
word-wrap: break-word;
Ich habe diese beiden Zeilen von Chathu verwendet. Funktioniert wie Magie, oder! Ich habe es verwendet, um den Text eines Submit-Buttons automatisch umzubrechen. Eine nette Lösung!! Danke, Chris!
Bitte geben Sie mir Beispielseiten
Großartig! Ich war am Verzweifeln mit einem neuen responsiven Theme, das ich baute. Ich konnte nicht verstehen, warum der Inhalt auf einigen Seiten nicht komprimiert wurde, wie es auf anderen Seiten der Fall war. Endlich habe ich herausgefunden, dass es der <pre><code>-umschlossene Inhalt war, den ich aufgenommen hatte. Ich dachte, ich müsste den Inhalt so eingeben, dass er nicht überläuft, oder `overflow: hidden` verwenden, aber Ihre Lösung hat wie ein Zauber funktioniert! Danke für das Teilen.
Vielen Dank
Das hat funktioniert, aber Firefox hatte immer noch Probleme mit PRE, da mein Box-Modell nicht vererbt wurde. FF mit `padding` im PRE-Block verursacht horizontalen Bildlauf, selbst mit `overflow: hidden`. Fix unten
pre, code { padding:30px; box-sizing:border-box; -moz-box-sizing:border-box; webkit-box-sizing:border-box; display:block; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; width:100%; overflow-x:auto; }PS – Wenn Sie immer noch Probleme haben, versuchen Sie, das Padding durch etwas wie ersetzt zu ersetzen
Ihr Webkit-Code hat keine (( – )) Er muss sein
-webkit- anstelle von webkit
Und bitte fügen Sie zuerst Webkit, dann Mozilla, dann die restlichen Codes hinzu
-webkit-
-moz-
property ohne Präfix
Lore,
Ich denke, diese ist kugelsicherer
pre {
word-break: break-all; /* webkit */
word-wrap: break-word;
white-space: pre;
white-space: -moz-pre-wrap; /* fennec */
white-space: pre-wrap;
white-space: pre\9; /* IE7+ */
}
Demo http://jsbin.com/bulletproof-responsive-pre/2/edit
^ +1
Ich kämpfte damit, dass sich das Pre umbrach und nicht die Breite einer responsiven Seite brach. Marcos Lösung funktioniert.
Danke, Marco! Funktioniert brillant!
Das Problem ist, dass es nicht bei Wörtern oder Satzzeichen umbricht wie der eigentliche Code daneben, sondern bei einzelnen Buchstaben. Gibt es dafür eine Umgehung? DANKE!
Fantastisch, Marco! Ich habe mich sehr bemüht, endlich funktioniert Ihre Lösung für mich
Danke dafür. Ich habe mir seit gestern den Kopf gestoßen. Hat meinen Tag gerettet :). Es sind die kleinen Dinge, wissen Sie….
Kann mir jemand helfen? Ich habe HTML- und Java-Code und möchte ihn in meiner Datenbank speichern, damit ich ihn später verwenden kann, um die benötigte Datei anzuzeigen. Welches Format sollte ich verwenden, um ihn an die Datenbank zu senden?
Hallo, diese Lösung funktioniert nicht im Internet Explorer 10
Hallo,
Das war eine gute Lösung für meinen Blog, da ich viele Linux-Terminalbefehle schreibe und `pre` verwende, um Dinge besser aussehen zu lassen.
Danke!
Danke, Marco. Es hat funktioniert.
Ist es möglich, dass es bei Wörtern statt bei Zeichen umbricht?
Egal, ich habe mein Problem gelöst. Ich habe versucht, dies auf einem Formularbutton zu verwenden und hatte Probleme mit den Zeichen, die sich anstelle der Wörter brachen. Ich habe „white-space: normal !important;“ verwendet und es hat gut funktioniert.
Dieselbe Frage habe ich auch. Habe Ihre Lösung auf regulärem Code angewendet, Christina. Es bricht immer noch bei Zeichen…
Ich bin mir nicht sicher, was ich ohne diese tolle Seite tun würde! Chris, danke, dass du dein extrem umfassendes Wissen teilst. Ich fange gerade erst mit der Webentwicklung an und dies ist meine Anlaufstelle für jede Hilfe, die ich brauche (und praktisch meine letzte Anlaufstelle, da es immer eine Antwort gibt!).
Vielen Dank.
Jay
Der Code funktioniert nicht mit Opera 10, gibt es eine Lösung?
Um zu verhindern, dass Wörter beim Umbruch von `white-space: pre-wrap;` gebrochen werden, können Sie auch verwenden
^+1
word-break: keep-all;Das hat wie erwartet funktioniert, danke!
Ich habe Opera Version 12. Ich habe meine Einstellungen für Webseiten auf „Auf Breite anpassen“ gesetzt. Aber es gibt bestimmte Webseiten, auf denen ich diese Funktion deaktivieren muss. Ich habe Stylish installiert. Welchen Code kann ich für eine bestimmte Webseite verwenden, um „Auf Breite anpassen“ zu ignorieren?
Marco.. du bist ein Genie!
Hallo,
Danke dafür, es hat super funktioniert. Gibt es jedoch eine Möglichkeit, die Breite des `pre`-Tags (mit dem Zeilenumbruch) so zu stylen, dass er sich automatisch in einer Tabelle oder einem Div anpasst?
Ich habe tagelang damit gekämpft. Jede Hilfe oder jeden Vorschlag werde ich sehr schätzen
Danke
Hallo, ich teste Crayon für die Hervorhebung meines Pre-Codes,
wie kann ich das Plugin zwingen, zu verwenden: word-break: keep-all;
, und verhindern, dass Wörter gebrochen werden?
Danke für den Rat, viele Grüße Sparky’s :)
Danke, das war eine Lebensrettung
Danke! Sehr praktisch! 8-)
Wirklich großartig, genau das, wonach ich gesucht habe. Danke :)
Funktionierte wie erwartet.
Aber ist `word-wrap: break-word;` nicht ausreichend?
Was ist der Nutzen von `white-space: pre-wrap;`?
Danke!
word-break: keep-all;Wenn dies auf `word-break: break-all;` gesetzt ist, wird alles andere
`white-space: blah` wird ignoriert. Vielleicht erwähnenswert
Danke. Das hat den Unterschied gemacht!
Danke, dieser Artikel hat mir wirklich geholfen, eine Lösung zu finden
Funktioniert immer noch nicht mit Firefox oder Opera?
Ich würde gerne ein Rezept sehen, um `pre-wrap` zu verwenden, wo ich ein Zeilenfortsetzungszeichen anhängen kann.
So unglaublich hilfreich, und warum? Weil Leute Code in ihren Seiten in Pre-Tags einfügen und ihre längeren Codezeilen einfach NICHT SICHTBAR sind.
Mit diesem kann ich jetzt mit der rechten Maustaste auf den Code klicken und „Untersuchen“ auswählen, dann zwei Zeilen CSS-Styling in den PRE-Tag einfügen und den Code schön (wenn auch nicht immer ästhetisch) umbrechen lassen, und vor allem sichtbar machen! Gott sei Dank für die Funktionen moderner Desktop-Browser \o/