Como envolvo texto em uma tag pré?

720

pre as tags são super úteis para blocos de código em HTML e para depuração de saída durante a gravação de scripts, mas como faço para quebrar o texto em vez de imprimir uma linha longa?

adambox
fonte

Respostas:

1009

A resposta desta página em CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
adambox
fonte
7
white-space:pre-line;(e todos os tipos de navegadores compatíveis) parece mais adequado em alguns casos (sem guias, por exemplo), pois ocupa o espaço no início da linha (se houver)
MediaVince
5
@MediaVince, pre-linerecolhe todos os espaços em branco (não apenas no início da linha). developer.mozilla.org/en-US/docs/Web/CSS/white-space possui uma tabela que resume o comportamento dos white-spacevalores.
Paul
1
word-wrap: break-wordnão faz o que a pergunta está pedindo, faz com que ocorram linhas entre as palavras. Você pode excluir essa linha. Nos navegadores modernos, você não precisa de nenhum -mozou de outro prefixo.
Flimm 28/03
141

Isso funciona muito bem para quebrar o texto e manter o espaço em branco dentro da pre-tag:

pre {
    white-space: pre-wrap;
}
Richard McKechnie
fonte
3
Isso ocorre apenas pelo CSS 3 - veja a resposta da adambox para obter mais compatibilidade.
lorem monkey
60

Descobri que pular a tag pré e usar espaço em branco: pré-envolver em uma div é uma solução melhor.

 <div style="white-space: pre-wrap;">content</div>
Mason240
fonte
3
Mais fácil que a resposta popular. Obrigado!
Ricky
4
No meu caso, eu queria mostrar um texto pré-formatado que continha abas para compor alguma tabela. Eu usei a sua solução PLUS eu adicionei uma fonte monspace assim todas as colunas foram alinhados:style="white-space: pre-wrap; font-family:monospace;"
Jan
1
Embora isso possa ser mais fácil, pode haver mais valor semântico no uso <pre>de blocos de código.
Angelos Chalaris
2
Sei que estou atrasado para este jogo, mas por que essa solução é melhor do que defini-la uma vez na folha de estilo? Eu tenho várias divs em uma tela de saída HTML que precisaria disso. Parece que uma única correção para o elemento na folha de estilo corrige todos os problemas.
Webfrogs
1
@webfrogs Sim, fazer uma classe .prewrap seria melhor.
Mason240
36

De maneira mais sucinta, isso força o conteúdo a quebrar dentro de uma tag "pre" sem quebrar as palavras. Felicidades!

pre {
  white-space: pre-wrap;
  word-break: keep-all
}

Veja o exemplo ao vivo aqui .

Erin Delacroix
fonte
20

Era disso que eu precisava. Impedia que as palavras se quebrassem, mas permitia uma largura dinâmica na área pré.

word-break: keep-all;
user1433454
fonte
17

Sugiro esquecer o pré e colocá-lo em uma área de texto.

Seu recuo permanecerá e seu código não será digitado no meio de um caminho ou algo assim.

Também é mais fácil selecionar o intervalo de texto em uma área de texto se você deseja copiar para a área de transferência.

A seguir, um trecho do php; portanto, se você não estiver no php, a maneira como você compacta os caracteres especiais html varia.

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

Para obter informações sobre como copiar texto para a área de transferência em js, consulte: Como copiar para a área de transferência em JavaScript? .

Contudo...

Acabei de inspecionar os blocos de código stackoverflow e eles envolvem uma tag <code> envolvida na tag <pre> com css ...

code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

Além disso, o conteúdo dos blocos de códigos stackoverflow é destacado em sintaxe usando (eu acho) http://code.google.com/p/google-code-prettify/ .

É uma boa configuração, mas estou indo com textareas por enquanto.

ekerner
fonte
13
Usar áreas de texto para algo diferente de entrada seria semanticamente incorreto? Parece uma solução estranha para mim.
Josh
2
Não é semanticamente incorreto como adicionar vários estilos de formatação a uma tag "pre" quando "pre" sugere que o texto contido está pré-formatado e, portanto, não requer formatação adicional e deve ser tomado como está;) Eu sugiro que não dê "semântica" prioridade sobre "funcional".
ekerner
1
Eu acho que não <pre>tem nenhum significado semântico (ao contrário <code>), significa simplesmente que novas linhas e vários espaços devem ser preservados.
Flimm
1
É a abreviação de "pré-formatado". Você está sugerindo que, na verdade, é a abreviação de apenas novas linhas e múltiplos espaços pré-formatados?
ekerner
O tipo de conteúdo deve ser especificado por uma tag interna, dependendo do tipo de texto pré-formatado. Remeto meus amigos para a página wiki pré-tag W3C: w3.org/wiki/HTML/Elements/pre
joshperry
14

Combinei as respostas @richelectron e @ user1433454.
Funciona muito bem e preserva a formatação do texto.

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>
vovahost
fonte
13

Você também pode:

pre { white-space: normal; }

para manter a fonte monoespaçada, mas adicione quebra automática de linha ou:

pre { overflow: auto; }

o que permitirá um tamanho fixo com rolagem horizontal para linhas longas.

Bobby Jack
fonte
Oh, obrigado pelo lembrete de estouro! Ótimo para monitores móveis.
XTL
6

Tente usar

<pre style="white-space:normal;">. 

Ou melhor, jogue CSS.

Eduardo Campañó
fonte
este parece trabalho no IE 7, mas não 6. Esta é a única sugestão que parecia promissor para IE ... todas as outras sugestões foram bons para outros navegadores ...
topwik
nevermind deve ter sido uma coisa de cache do navegador. reiniciado IE 6 e está tudo bem. Felicidades.
Topwik 28/04/10
2
O problema desta solução é que ela também dissolverá caracteres de nova linha ... Por exemplo, qualquer separação de texto em parágrafos será perdida.
Chris W.
4

Use white-space: pre-wrape alguns prefixos para quebra automática de linha dentro de pres.

Não use, word-wrap: break-wordporque isso simplesmente quebra uma palavra ao meio, o que provavelmente é algo que você não deseja.

FryingggPannn
fonte
3

O Best Cross Browser Way trabalhou para mim para obter quebras de linha e mostra o código ou texto exato: (chrome, internet explorer, Firefox)

CSS:

xmp{ white-space:pre-wrap; word-wrap:break-word; }

HTML:

<xmp> your text or code </xmp>
feacco
fonte
Trabalhou muito para mim :-)
Wesley TUZZA
7
O xmp foi descontinuado desde o HTML 3.2, foi completamente removido do HTML5 e nunca funcionou corretamente desde o início. Não foi implementado de forma consistente entre os vários navegadores.
PeterToTheThird
Usando espaço em branco: pre-wrap; e quebra de linha: quebra de palavra; no meu css, mantém o recuo de (json) snippets, a linha pre remove isso. (Chrome)
Peter Visser
1

O seguinte me ajudou:

pre {
    white-space: normal;
    word-wrap: break-word;
}

obrigado

prashant2402
fonte
3
Eu acho que é melhor usar, white-space: pre-wrap;porque respeita os espaços em branco
Ivan Ferrer Villa
-1

O <pre>-Element significa "texto pré-formatado" e se destina a manter a formatação do texto (ou qualquer outra coisa) entre suas tags. Portanto, na verdade, não se pretende ter quebra automática de linha ou quebra de linha dentro da <pre>tag

O texto em um elemento é exibido em uma fonte de largura fixa (geralmente Courier) e preserva os espaços e as quebras de linha .

fonte: w3schools.com , ênfases feitas por mim.

rob_st
fonte
Apenas afirma o fato de que é possível agrupar automaticamente o texto em uma pré-tag, embora não seja a intenção da pré-tag agrupar automaticamente.
rob_st
Esta é a única resposta correta à pergunta do autor. Qualquer outra resposta ou possível "solução" incentiva o uso indevido do elemento <pre>. Essencialmente, se você deseja colocar o tipo dentro de um elemento <pre> e enviá-lo, use uma tag <p> e estilize-a da maneira que desejar com uma classe CSS.
Markus
Não sei por que as pessoas acham útil dar esse tipo de conselho "sou mais esperto que você". Não, uma tag <p> não é um substituto adequado: ela não preserva espaços em branco nem quebras de linha. Uma tag <pre> é útil para preservar quebras de linha, mas às vezes é necessário adicionar quebra automática de linha, da mesma maneira que qualquer editor de código pode preservar quebras de linha e adicionar quebra automática de linha a linhas longas.
dwk 13/04