Bagaimana cara saya membungkus teks dalam tag pra?

pre tag sangat berguna untuk blok kode dalam HTML dan untuk debugging output saat menulis skrip, tetapi bagaimana cara membuat teks-bungkus alih-alih mencetak satu baris panjang?

Jawabannya, dari halaman ini dalam 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+ */
}

Ini sangat bagus untuk membungkus teks dan mempertahankan spasi di dalam pretag-:

pre {
    white-space: pre-wrap;
}

Saya telah menemukan bahwa melewatkan tag pre dan menggunakan white-space: pre-wrap pada div adalah solusi yang lebih baik.

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

Paling ringkas, ini memaksa konten untuk membungkus tag "pre" tanpa melanggar kata-kata. Bersulang!

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

Lihat contoh langsung di sini .

Inilah yang saya butuhkan. Itu menjaga kata-kata dari melanggar tetapi memungkinkan untuk lebar dinamis di area pra.

word-break: keep-all;

Saya sarankan lupakan pre dan masukkan saja ke dalam textarea.

Indentasi Anda akan tetap dan kode Anda tidak akan terbungkus kata di tengah jalan atau sesuatu.

Lebih mudah untuk memilih rentang teks di area teks juga jika Anda ingin menyalin ke clipboard.

Berikut ini adalah kutipan php jadi jika Anda tidak di php maka cara Anda mengemas karakter khusus html akan bervariasi.

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

Untuk info tentang cara menyalin teks ke clipboard di js lihat: Bagaimana cara menyalin ke clipboard di JavaScript? .

Namun...

Saya baru saja memeriksa blok kode stackoverflow dan mereka membungkusnya dengan tag <code> yang dibungkus dengan tag <pre> dengan 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;
}

Juga isi dari blok kode stackoverflow disorot menggunakan sintaks (saya pikir) http://code.google.com/p/google-code-prettify/ .

Ini pengaturan yang bagus tapi saya hanya menggunakan textareas untuk saat ini.

Saya menggabungkan jawaban @richelectron dan @ user1433454.
Ini bekerja dengan sangat baik dan mempertahankan pemformatan teks.

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

</pre>

Anda dapat:

pre { white-space: normal; }

untuk mempertahankan font monospace tetapi menambahkan bungkus kata, atau:

pre { overflow: auto; }

yang akan memungkinkan ukuran tetap dengan pengguliran horizontal untuk garis panjang.

Coba gunakan

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

Atau lebih baik membuang CSS.

Gunakan white-space: pre-wrapdan beberapa awalan untuk pemecahan garis otomatis predi dalam s.

Jangan gunakan word-wrap: break-wordkarena ini hanya, tentu saja, memecah kata menjadi setengah yang mungkin sesuatu yang tidak Anda inginkan.

Cara Palang Browser Terbaik berfungsi bagi saya untuk mendapatkan jeda baris dan menunjukkan kode atau teks yang tepat: (chrome, internet explorer, Firefox)

CSS:

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

HTML:

<xmp> your text or code </xmp>

Berikut ini membantu saya:

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

Terima kasih

The <pre>-Element singkatan dari "pra-diformat-teks" dan dimaksudkan untuk menjaga format dari teks (atau apa pun) antara tag-nya. Oleh karena itu sebenarnya tidak ingin memiliki pembungkusan kata atau jeda baris otomatis dalam <pre>-Tag

Teks dalam elemen ditampilkan dalam font dengan lebar tetap (biasanya Kurir), dan mempertahankan spasi dan pemisah baris .

sumber: w3schools.com , menekankan dibuat sendiri.