Wie ändere ich eine Spanne, um mit CSS wie ein Pre auszusehen?

108

Ist es möglich, ein <span>Tag (oder <div>) so zu ändern , dass sein Inhalt <pre>vorformatiert wird, als würde ein Tag nur CSS verwenden?

html css jsight
quelle

Antworten:

164

Sehen Sie sich das W3C CSS2.1-Standardstilblatt oder den CSS2.2-Arbeitsentwurf an . Kopieren Sie alle Einstellungen für PRE und fügen Sie sie in Ihre eigene Klasse ein.

pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}
Diodeus - James MacFarlane
quelle
1
Es ist eine gute Idee, dies so zu tun, um zu verstehen, woher diese Standardeinstellungen stammen.
Diodeus - James MacFarlane
2
Wenn ich dies versuche, bleiben die Zeilenumbrüche nicht erhalten.
Agnel Kurian
Das <pre> -Tag zeigt horizontale Bildlaufleisten an, wenn der Text zu breit ist, dieses CSS jedoch nicht. Weiß jemand, wie man sie zeigt?
Shindigo
1
@shindigo Hast du es versucht overflow: scroll? Oder wenn Sie nur horizontales Scrollen möchten overflow-x: scroll developer.mozilla.org/en-US/docs/Web/CSS/overflow
Kanmuri
1
@shindigo ist overflow: auto;möglicherweise besser, andernfalls erhalten Sie möglicherweise zwei Sätze von Bildlaufleisten, wenn Sie diese nicht benötigen.
Spechal
57

Siehe die CSS-Eigenschaft für Leerzeichen .

.like-pre { white-space: pre; }
Pistos
quelle
7
Alternativ können Sie white-space: pre-wrapnützlich finden . Es verhält sich wie, preschließt aber lange Schlangen ein.
Kai Carver
25

Dadurch sieht ein SPAN wie ein PRE aus:

span {
  white-space: pre;
  font-family: monospace;
  display: block;
}

Denken Sie daran, den CSS-Selektor entsprechend zu ändern.

Mr. Shiny und New 安 宇
quelle
2

Versuche dies

span {
    white-space: pre;
    font-family: monospace;
    display: block;
    unicode-bidi: embed
}
Yanni
quelle
1

Versuchen Sie diesen Stil

.pre {

white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
line-height: 1.5;   
word-break: break-all;
white-space: pre;
white-space: pre\9; /* IE7+ */
display: block;
}

Wird hier auch verwendet - http://www.makemyshop.in/

Yesu Raj
quelle
0

Warum nicht einfach das <pre> -Tag anstelle des span-Tags verwenden? Beide sind inline, daher sollten sich beide so verhalten, wie Sie es möchten. Wenn Sie Probleme haben, die gesamte Definition von <pre> zu überschreiben, geben Sie ihr einfach eine Klasse / ID.


quelle
1
Manchmal haben Sie bereits eine Spanne auf einer Seite und können diese nicht ändern, z. B. wenn sie Teil eines vorhandenen CMS-Systems ist.
Mr. Shiny und New
B / c das Framework weigert sich, den Inhalt unter mein <pre> zu stellen, wie ich es verlange. Ich könnte es umgehen, aber das ist viel schwieriger als nur ein paar CSS-Requisiten zu setzen.
Jsight