HTML pre: Mempertahankan Spasi dan Membungkus Baris Panjang
HTML <pre> menandai wilayah teks pra-format yang mempertahankan spasi dan pemisah baris. Gabungkan dengan <code> untuk kode sumber, dan gunakan CSS white-space: pre-wrap ketika baris panjang harus dibungkus ke lebar yang tersedia.
Perbedaan Antara pre dan Paragraf Biasa
Paragraf biasa menggabungkan spasi dan pemisah baris berturut-turut dalam sumber sesuai dengan CSS default. Tag pre mempertahankan spasi ini secara default, membuatnya cocok untuk kode dengan indentasi, log, dan teks di mana spasi yang konsisten penting. Font default biasanya monospace, tetapi font dan penanganan spasi dapat diubah dengan CSS.
Anda dapat menyelaraskan visual seperti tabel menggunakan spasi, tetapi ini tidak memberikan hubungan baris dan kolom yang sebenarnya dari sebuah tabel. Gunakan tabel untuk data perbandingan, dan ketika menyampaikan makna dengan spasi seperti seni ASCII, berikan penjelasan yang dapat dipahami oleh pembaca layar.
Contoh Lengkap: Mempertahankan Spasi dan Menangani Baris Panjang
Simpan dokumen berikut sebagai pre-demo.html dan buka di browser. Simpan file dalam UTF-8, dan tidak diperlukan pustaka eksternal. Pengguliran horizontal dan pembungkusan kata telah diterapkan secara terpisah pada string panjang yang sama.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Membandingkan spasi dan baris baru dengan pre</title>
<style>
body { max-width: 40rem; margin: 1rem auto; padding: 0 1rem; }
pre { padding: 1rem; background: #eef2f4; }
.scroll { overflow-x: auto; }
.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<h1>Spasi dan baris baru</h1>
<p>one two
three</p>
<pre>one two
three</pre>
<h2>Gulir horizontal</h2>
<pre class="scroll"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
<h2>Pembungkusan baris</h2>
<pre class="wrap"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
<h2>Menampilkan sumber HTML</h2>
<pre class="scroll"><code><p>Hello & welcome</p></code></pre>
</body>
</html>Paragraf pertama digabung menjadi satu baris sesuai dengan penanganan spasi default, dan pre berikut mempertahankan empat spasi antara kata one dan two serta empat spasi sebelum kata three. Ketika layar diperkecil, contoh scroll mendapatkan gulir horizontal, dan contoh wrap memecah bahkan kata-kata panjang ke baris berikutnya. Di area tampilan sumber HTML, <p>Hello & welcome</p> muncul sebagai teks dalam bentuk tag.
HTML di dalam pre juga ditafsirkan.
Pre bukan elemen yang mencegah interpretasi HTML. Jika Anda menulis tag <strong> yang sebenarnya di dalamnya, makna tag tersebut akan diterapkan. Untuk menampilkan sumber HTML sebagai teks, gunakan escape < menjadi < dan & menjadi &. Contoh terakhir dari seluruh dokumen di atas menggunakan prinsip ini.
Pemisah baris pertama segera setelah tag awal pre dihapus oleh parser HTML. Pemisah baris berikutnya dan indentasi dalam kode dipertahankan, jadi periksa posisi awal teks yang sebenarnya untuk memastikan bahwa spasi untuk penyelarasan dokumen tidak muncul di layar. Saat menampilkan kode secara dinamis, Anda dapat memasukkan string menggunakan textContent alih-alih innerHTML untuk mencegahnya diinterpretasikan sebagai tag.
Hal-hal yang harus diperiksa ketika pemisahan baris otomatis tidak terjadi
Jika Anda hanya menentukan overflow-wrap dan mempertahankan white-space: pre default, pemisahan baris yang diinginkan mungkin tidak muncul. Untuk mempertahankan spasi dan pemisahan baris saat membungkus di tepi layar, terapkan pre-wrap, dan untuk memecah string panjang tanpa spasi, juga tentukan overflow-wrap. Sebaliknya, jika Anda perlu mempertahankan struktur satu baris untuk kode, tetap gunakan pre dan sediakan pengguliran internal dengan overflow-x: auto.
pre mempertahankan tata letak teks, dan code menunjukkan bahwa kontennya adalah kode. Menggunakan keduanya bersama-sama tidak secara otomatis menghasilkan pewarnaan sintaks, dan diperlukan penyorot atau CSS terpisah. Alih-alih bergantung pada atribut width dan wrap yang sudah usang, sesuaikan tampilan dengan CSS. Untuk kondisi rinci, lihat definisi pre dalam standar standar HTML untuk pre dan dokumen referensi pre di MDN.
