Come avvolgere il testo in un pre tag?

pre i tag sono super utili per blocchi di codice in HTML e per il debug dell'output durante la scrittura di script, ma come faccio a racchiudere il testo anziché a stampare una riga lunga?

La risposta, da questa pagina nel 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+ */
}

Funziona benissimo per avvolgere il testo e mantenere gli spazi bianchi all'interno del pretag:

pre {
    white-space: pre-wrap;
}

Ho scoperto che saltare il pre tag e usare white-space: pre-wrap su un div è una soluzione migliore.

 <div style="white-space: pre-wrap;">content</div>

Più succintamente, questo costringe il contenuto ad avvolgersi all'interno di un tag "pre" senza rompere le parole. Saluti!

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

Vedi esempio dal vivo qui .

Questo è quello di cui avevo bisogno. Evitava che le parole si spezzassero, ma consentiva una larghezza dinamica nell'area pre.

word-break: keep-all;

Suggerisco di dimenticare il pre e inserirlo in un'area di testo.

Il rientro rimarrà e il codice non verrà racchiuso tra parole nel mezzo di un percorso o qualcosa del genere.

È più facile selezionare l'intervallo di testo anche in un'area di testo se si desidera copiare negli Appunti.

Quello che segue è un estratto di php, quindi se non sei in php, il modo in cui impacchetterai i caratteri speciali html varierà.

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

Per informazioni su come copiare il testo negli Appunti in js vedere: Come si copia negli Appunti in JavaScript? .

Però...

Ho appena ispezionato i blocchi di codice dello stackoverflow e sono stati inseriti in un tag <code> racchiuso in un tag <pre> con 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;
}

Anche il contenuto dei blocchi di codice dello stackoverflow è evidenziato mediante la sintassi (credo) http://code.google.com/p/google-code-prettify/ .

È una buona configurazione, ma per ora sto solo usando textareas.

Ho combinato le risposte di @richelectron e @ user1433454.
Funziona molto bene e conserva la formattazione del testo.

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

</pre>

Puoi:

pre { white-space: normal; }

per mantenere il carattere monospace ma aggiungere la parola a capo automatico oppure:

pre { overflow: auto; }

che consentirà una dimensione fissa con scorrimento orizzontale per le linee lunghe.

Prova a usare

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

O meglio lanciare CSS.

Utilizzare white-space: pre-wrape alcuni prefissi per l'interruzione automatica della linea all'interno di pres.

Non usare word-wrap: break-word perché questo, ovviamente, rompe una parola a metà che probabilmente è qualcosa che non vuoi.

Il modo migliore Cross Browser ha funzionato per me per ottenere interruzioni di riga e mostra codice o testo esatti: (Chrome, Internet Explorer, Firefox)

CSS:

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

HTML:

<xmp> your text or code </xmp>

Quanto segue mi ha aiutato:

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

Grazie

Il <pre>-Element sta per "pre-formattato-text" e ha lo scopo di mantenere la formattazione del testo (o altro) tra le sue etichette. Pertanto, in realtà non si prevede di avere un ritorno a <pre>capo automatico o interruzioni di riga all'interno di -Tag

Il testo in un elemento viene visualizzato in un carattere a larghezza fissa (solitamente Courier) e conserva sia gli spazi che le interruzioni di riga .

fonte: w3schools.com , enfasi fatta da me stesso.