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

El <pre> -Element steht für "pre-formatted-text" und soll die Formatierung des Textes (oder was auch immer) zwischen seinen Tags beibehalten. Daher ist es eigentlich nicht vorgesehen, einen automatischen Wortumbruch oder Zeilenumbrüche innerhalb des <pre> -Tag

Text in einem Element wird in einer Schriftart mit fester Breite (in der Regel Courier) angezeigt, und er bewahrt beide Räume und Zeilenumbrüche .

Quelle: w3schools.com , betont von mir selbst gemacht.

Answer 2

Das Folgende hat mir geholfen:

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

Gracias

Answer 3

The Best Cross Browser Way hat bei mir funktioniert, um Zeilenumbrüche zu erhalten und exakten Code oder Text anzuzeigen: (Chrome, Internetexplorer, Firefox)

CSS:

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

HTML:

<xmp> your text or code </xmp>

Answer 4

Falls Sie Prism oder eine andere Code-Formatierungsbibliothek verwenden, müssen Sie die booth pre- und code-Tags wie folgt ändern:

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

code{
    white-space: normal !important;
}

Answer 5

<pre> tut seine Arbeit, aber für Code gibt es <code> Tag.