wake-up-neo.com

Element als vorformatierten Text über CSS anzeigen

Gibt es eine Möglichkeit, die Anzeige eines pre -Elements über CSS zu emulieren?

Kann ich zum Beispiel das Leerzeichen in diesem Div mit einer CSS-Regel intakt halten?

<div class="preformatted">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens 
    - Cantaloupe
</div>
htmlcsswhitespacepre
98
Dagg Nabbit

Verwenden white-space: pre, um die Vorformatierung von Leerzeichen wie im pre -Element beizubehalten. Um noch einen Schritt weiter zu gehen, fügen Sie auch font-family: monospace, da pre -Elemente normalerweise standardmäßig in einer Monospace-Schriftart festgelegt sind (z. B. zur Verwendung mit Codeblöcken).

.preformatted {
    font-family: monospace;
    white-space: pre;
}
<div class="preformatted">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens 
    - Cantaloupe
</div>
158
BoltClock
.preformatted {
   white-space: pre-wrap;
}

Ich denke, "Pre-Wrap" ist besser. Es kann mit langer Länge in der Linie helfen.

38
Kondrashenkov Anton

Ja:

div.preformatted {
    white-space: pre;
    }

Referenz:

10
David Thomas

um zu bekommen <pre> können Sie verwenden;

div.preformatted{ white-space: pre ; display: block; }
3
Rasika Perera