13.01.2025

Como Estilizar um Span ou Div Como um Elemento Pre Usando CSS

Resposta Rápida

Para fazer um elemento <span> parecer com um <pre>, aplique a propriedade white-space: pre;, que preserva espaços e quebras de linha. Além disso, adicione display: block; para garantir que o elemento comece em uma nova linha, semelhante ao comportamento de <pre>. Você pode utilizar os seguintes estilos:

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

Você pode atribuir essa classe a um elemento <span> assim:

<span class="fake-pre">Conteúdo formatado.</span>

Esses estilos permitem replicar o formato do elemento <pre> na tag <span>, mantendo a semântica HTML.

Compreendendo a Transformação 'pre'

Para emular o comportamento do <pre>, é útil conhecer seus estilos padrão conforme descrito na Folha de Estilos Padrão W3C CSS2.1 e no Rascunho de Trabalho CSS2.2.

Características do Elemento <pre>

A propriedade white-space com o valor pre permite que a tag <pre> preserve espaços e quebras de linha.

Usando Fontes Monoespaçadas

A propriedade font-family: monospace; garante que os caracteres tenham uma largura uniforme, característica do <pre> e ajuda a manter o alinhamento.

Características de Elementos de Bloco

A propriedade display: block; confere ao elemento <span> um comportamento semelhante ao de <pre>, movendo-o para uma nova linha e aplicando a formatação de texto como a de um elemento de bloco.

Visualização

Agora vamos explorar como a aparência de <span> muda quando estilizado para parecer com <pre> com CSS:

Antes de aplicar CSS:

<span>🦎</span> Calmo e discreto.

Depois de aplicar CSS:

span {
    display: block; /* Luminárias chamam atenção */
    white-space: pre; /* Cada espaço conta, respeitamos o espaço */
    font-family: monospace; /* Uniformidade para ordem e legibilidade */
}

Percepção visual após aplicar CSS:

<pre>🦎</pre> Exterior brilhante e carisma.

Com essas mudanças de estilo, o camaleão discreto se transforma em uma visão vívida e atraente, ilustrando a metamorfose de <span> em <pre>.

Ajustes e Melhorias Adicionais

Lidando com Problemas de Conteúdo Excedente

Se o conteúdo do seu elemento de bloco exceder os limites do bloco, use a propriedade overflow: auto; ou overflow: scroll;:

.fake-pre { 
    overflow: auto; /* Gerenciando o conteúdo excessivo */ 
}

Adicionando Volume com Padding e Bordas

Criar volume e completude nos estilos ao adicionar padding e border ajudará a aproximar a aparência do <span> à do <pre>:

.fake-pre {
    border: 1px solid #ccc; /* Destacando os contornos */
    padding: 10px; /* Mais espaço proporciona mais ar */
}

Gerenciando Texto Bidirecional

Para conteúdo com texto bidirecional, use unicode-bidi: embed;, já que o <pre> frequentemente utiliza essa propriedade por padrão:

.fake-pre { 
    unicode-bidi: embed; /* Harmonizando diferentes direções de texto */ 
}

Recursos Úteis

1. white-space | CSS-Tricks — Uma análise detalhada da propriedade white-space em CSS.
2. white-space - CSS: Cascading Style Sheets | MDN — Detalhes sobre white-space e seu papel no design web.
3. font-family - CSS: Cascading Style Sheets | MDN — Uma descrição detalhada da propriedade font-family, facilitando o uso de fontes monoespaçadas.
4. display - CSS: Cascading Style Sheets | MDN — Uma explicação sobre a propriedade display e seu impacto no layout, especialmente ao usar inline-block.
5. CSS Overflow — Exemplos visuais e dicas para lidar com o overflow de conteúdo em CSS.
6. border - CSS: Cascading Style Sheets | MDN — Uma descrição passo a passo da propriedade border e sua importância na estilização de elementos semelhantes ao <pre>.

Video

Navigation