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

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

5

Insbesondere ist die Eigenschaft, die Sie betrachten ,:

white-space: pre

http://www.quirksmode.org/css/whitespace.html
http://www.w3.org/TR/CSS21/text.html#white-space-prop

— Sören Kuklau
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.

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