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

Respostas:

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


fonte
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