Bagaimana cara saya membungkus teks dalam tag pra?


721

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?

Jawaban:


1010

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

7
white-space:pre-line;(dan semua rasa yang kompatibel dengan browser) tampaknya lebih memadai dalam beberapa kasus (tanpa tab misalnya) karena menghilangkan ruang di awal baris (jika ada beberapa)
MediaVince

5
@MediaVince, hancurkan pre-linesemua spasi putih (tidak hanya di awal baris). developer.mozilla.org/en-US/docs/Web/CSS/white-space memiliki tabel yang merangkum perilaku white-spacenilai.
Paul

1
word-wrap: break-wordtidak melakukan apa yang diminta pertanyaan, itu menyebabkan garis pembungkus terjadi bahkan di antara kata-kata. Anda dapat menghapus garis itu. Pada browser modern, Anda tidak memerlukan salah satu -mozatau awalan lainnya.
Flimm

141

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

pre {
    white-space: pre-wrap;
}

3
Ini karena hanya CSS 3 - lihat jawaban dari adambox untuk kompatibilitas lebih lanjut.
monyet lorem

60

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>

3
Lebih mudah daripada jawaban populer. Terima kasih!
Ricky

4
Dalam kasus saya, saya ingin menampilkan teks pra-format yang berisi tab untuk membuat beberapa tabel. Saya menggunakan solusi Anda PLUS saya menambahkan font monspace sehingga semua kolom selaras:style="white-space: pre-wrap; font-family:monospace;"
Jan

1
Meskipun ini mungkin lebih mudah, mungkin ada lebih banyak nilai semantik dalam menggunakan <pre>untuk blok kode.
Angelos Chalaris

2
Saya tahu ini saya terlambat ke permainan ini, tetapi mengapa solusi ini lebih baik daripada mengaturnya sekali di stylesheet? Saya memiliki beberapa div pada satu layar keluaran HTML yang membutuhkan ini. Sepertinya perbaikan tunggal ke elemen di stylesheet memperbaiki semua masalah.
webfrogs

1
@webfrogs Ya, membuat kelas .prewrap akan menjadi yang terbaik.
Mason240

36

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 .


20

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

word-break: keep-all;

17

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.


13
Bukankah menggunakan area teks untuk sesuatu selain input secara semantik salah? Sepertinya solusi aneh bagi saya.
Josh M.

2
Tidak semantik yang salah dengan menambahkan banyak gaya format ke tag "pra" ketika "pra" menyarankan bahwa teks yang terkandung diformat sebelumnya dan oleh karena itu tidak memerlukan pemformatan tambahan dan lebih baik dianggap apa adanya;) Saya sarankan jangan berikan prioritas "semantik" daripada "fungsional".
ekerner

1
Saya tidak berpikir <pre>memiliki makna semantik (tidak seperti <code>), itu hanya berarti bahwa baris baru dan banyak ruang harus dilestarikan.
Flimm

1
Ini singkatan dari "pra-diformat". Youre menyarankan bahwa ini sebenarnya kependekan dari pre-format-newlines-dan-multi-spasi-saja?
ekerner

Jenis konten dimaksudkan untuk ditentukan oleh tag dalam, tergantung pada jenis teks yang diformat sebelumnya. Saya akan merujuk teman-teman saya ke halaman wiki pra-tag w3c: w3.org/wiki/HTML/Elements/pre
joshperry

14

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>

13

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.


Oh, terima kasih atas pengingatnya! Bagus untuk tampilan seluler.
XTL

6

Coba gunakan

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

Atau lebih baik membuang CSS.


yang ini tampaknya bekerja di IE 7 tetapi tidak 6. ini adalah satu-satunya saran yang tampak menjanjikan untuk IE ... semua saran lain baik untuk browser lain ...
topwik

Nevermind pasti merupakan sesuatu yang cache browser. restart IE 6 dan semuanya baik-baik saja. Bersulang.
topwik

2
Masalah dengan solusi ini adalah itu juga akan membubarkan karakter baris baru ... Misalnya, setiap pemisahan teks menjadi paragraf akan hilang.
Chris W.

4

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.


3

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>

Bekerja sangat bagus untuk saya :-)
Wesley Tuzza

7
xmp telah ditinggalkan sejak HTML 3.2, telah sepenuhnya dihapus dari HTML5, dan tidak pernah bekerja dengan baik sejak awal. Itu tidak diterapkan secara konsisten di antara berbagai browser.
PeterToTheThird

Menggunakan white-space: pre-wrap; dan pembungkus kata: break-word; di css saya, simpan lekukan (json) cuplikan, sebelum baris menghapus ini. (Chrome)
Peter Visser

1

Berikut ini membantu saya:

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

Terima kasih


3
Saya pikir lebih baik menggunakan white-space: pre-wrap;karena itu menghormati ruang putih
Ivan Ferrer Villa

-1

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.


Itu hanya menyatakan fakta, bahwa adalah mungkin untuk membungkus teks secara otomatis dalam pra-tag meskipun itu bukan maksud pra-tag untuk membungkus otomatis.
rob_st

Ini adalah satu-satunya jawaban yang benar untuk pertanyaan penulis. Jawaban lain atau "solusi" yang memungkinkan mendorong penyalahgunaan elemen <pre>. Pada dasarnya, jika Anda ingin memasukkan tipe di dalam elemen <pre> dan membungkusnya, gunakan tag <p>, dan gantilah dengan cara apa pun yang Anda suka dengan kelas CSS.
Markus

Saya tidak yakin mengapa orang merasa sangat membantu untuk memberikan nasihat "Saya lebih pintar dari Anda". Tidak, tag <p> bukan pengganti yang cocok: tag ini tidak mempertahankan spasi putih maupun jeda baris. Tag <pre> berguna untuk mempertahankan jeda baris, tetapi kadang-kadang perlu menambahkan pembungkus tambahan, dengan cara yang sama seperti editor kode mana pun bisa mempertahankan jeda baris dan menambahkan pembungkus ke baris panjang.
dwk
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.