Como alterar um intervalo para parecer um pré com CSS?

108

É possível alterar uma <span>tag (ou <div>) para pré-formatar seu conteúdo como uma <pre>tag faria usando apenas CSS?

html css

— jsight
fonte

164

Veja a folha de estilo padrão W3C CSS2.1 ou o esboço de trabalho CSS2.2 . Copie todas as configurações do PRE e coloque-as em sua própria classe.

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

— Diodeus - James MacFarlane
fonte

1

É uma boa ideia fazer isso para entender de onde vêm esses padrões.

— Diodeus - James MacFarlane

2

Quando tento fazer isso, as quebras de linha não são preservadas.

— Agnel Kurian

A tag <pre> exibirá barras de rolagem horizontais quando o texto for muito largo, mas este css não. Alguém sabe como mostrar para eles?

— shindigo

1

@shindigo Você já tentou usar overflow: scroll? Ou se você quiser apenas rolagem horizontal overflow-x: scroll developer.mozilla.org/en-US/docs/Web/CSS/overflow

— Kanmuri

1

@shindigo overflow: auto;pode ser melhor do contrário, você pode acabar com dois conjuntos de barras de rolagem quando não precisar delas.

— Spechal

57

Veja a propriedade CSS de espaço em branco .

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

— Pistos
fonte

7

alternativamente, você pode achar white-space: pre-wrapútil. Ele se comporta como pre, mas envolve longas linhas.

— Kai Carver

25

Isso faz com que um SPAN pareça um PRE:

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

Lembre-se de alterar o seletor css conforme apropriado.

— Sr. Brilhante e Novo 安宇
fonte

5

Especificamente, a propriedade que você está olhando é:

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

Tente isto

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

— Yanni
fonte

1

Experimente este estilo

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

Usei o mesmo aqui - http://www.makemyshop.in/

— Yesu Raj
fonte

0

Por que não usar apenas a tag <pre>, em vez da tag span? Ambos são embutidos, portanto, ambos devem se comportar da maneira que você gostaria. Se você tiver problemas ao substituir toda a definição de <pre>, basta fornecer uma classe / id.

1

Às vezes, você já tem um intervalo em uma página e não pode alterá-lo, como se fosse parte de um sistema CMS existente.

— Mr. Shiny and New 安宇

B / c a estrutura se recusa a colocar o conteúdo sob meu <pre> da maneira que estou pedindo. Eu poderia contornar isso, mas isso é muito mais difícil do que apenas definir alguns adereços CSS.

— jsight de