Como envolvo texto em uma tag pré?

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?

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+ */
}

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

pre {
    white-space: pre-wrap;
}

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>

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 .

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

word-break: keep-all;

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.

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>

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.

Tente usar

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

Ou melhor, jogue CSS.

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.

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>

O seguinte me ajudou:

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

obrigado

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.