Come cambiare un intervallo per sembrare un pre con CSS?

108

È possibile modificare un <span>tag (o <div>) per preformattare i suoi contenuti come <pre>farebbe un tag utilizzando solo CSS?

html css

— jsight
fonte

164

Guarda il foglio di stile predefinito CSS2.1 del W3C o la bozza di lavoro CSS2.2 . Copia tutte le impostazioni per PRE e inseriscile nella tua classe.

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

— Diodeus - James MacFarlane
fonte

1

È una buona idea farlo in questo modo per capire da dove provengono queste impostazioni predefinite.

— Diodeus - James MacFarlane

2

Quando provo questo, le interruzioni di riga non vengono mantenute.

— Agnel Kurian

Il tag <pre> mostrerà le barre di scorrimento orizzontali quando il testo è troppo largo, ma questo css non lo farà. Qualcuno sa come mostrarli?

— shindigo

1

@shindigo Hai provato a usare overflow: scroll? O se vuoi solo lo scorrimento orizzontale overflow-x: scroll developer.mozilla.org/en-US/docs/Web/CSS/overflow

— Kanmuri

1

@shindigo overflow: auto;potrebbe essere migliore altrimenti potresti ritrovarti con due set di barre di scorrimento quando non ne hai bisogno.

— Spechal

57

Vedi la proprietà CSS dello spazio bianco .

.like-pre { white-space: pre; }

— pistos
fonte

7

in alternativa, potresti trovare white-space: pre-wraputile. Si comporta come pre, ma avvolge lunghe file.

— Kai Carver

25

Questo fa sembrare uno SPAN un PRE:

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

Ricordarsi di modificare il selettore CSS come appropriato.

— Mr. Shiny e New 安宇
fonte

5

Nello specifico, la proprietà che stai guardando è:

white-space: pre

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

— Sören Kuklau
fonte

2

Prova questo

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

— Yanni
fonte

1

Prova questo stile

.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;
}

Usato lo stesso qui - http://www.makemyshop.in/

— Yesu Raj
fonte

0

Perché non utilizzare semplicemente il tag <pre>, invece del tag span? Entrambi sono in linea, quindi entrambi dovrebbero comportarsi nel modo desiderato. Se hai problemi a sovrascrivere l'intera definizione di <pre>, dagli semplicemente un id / classe.

1

A volte hai già un intervallo su una pagina e non puoi modificarlo, come se facesse parte di un sistema CMS esistente.

— Mr. Shiny and New 安宇

B / c il framework si rifiuta di mettere i contenuti sotto il mio <pre> nel modo in cui lo chiedo. Potrei aggirarlo, ma è molto più difficile che impostare solo alcuni oggetti di scena CSS.

— jsight