Aturan penanganan spasi putih HTML
"Karakter spasi" dalam HTML mencakup tiga jenis: spasi, tab, dan umpan baris (CR/LF).
Kita tahu bahwa secara default, karakter spasi dalam kode sumber HTML ditampilkan sebagai spasi, dan beberapa karakter spasi berturut-turut akan diperlakukan sebagai satu, atau dengan kata lain, beberapa karakter spasi berturut-turut akan digabungkan.
Namun, terkadang, kami berharap beberapa spasi berturut-turut dalam kode sumber HTML dapat dirender secara realistis di browser web, atau kami memerlukan jeda baris dalam kode sumber agar berfungsi sebagai jeda baris sebenarnya. Jadi, kami menemukan tag <pre>, yang benar-benar dapat mengembalikan situasi sebenarnya dari karakter spasi putih di teks internalnya.
Jadi kita sering memasukkan sepotong teks yang mewakili kode komputer ke dalam tag <pre>, dan mereka akan menampilkan lekukan spasi dan efek pembungkusan garisnya sendiri di browser, tanpa perlu kita menambahkan gaya dan tag tambahan untuk mengontrolnya dan jeda baris.
Ketika pemahaman kita tentang CSS semakin mendalam, kita menemukan bahwa ternyata semua ini diatur oleh atribut spasi. Alasan mengapa elemen <pre> begitu ajaib adalah karena ia memiliki gaya default {white-space: pre;}.
properti ruang putih
Atribut spasi putih di CSS digunakan untuk menetapkan aturan pemrosesan karakter spasi putih teks, termasuk: apakah akan menggabungkan karakter spasi putih, apakah akan mempertahankan jeda baris, dan apakah akan mengizinkan pembungkusan baris otomatis. Perbedaan perilaku setiap nilai atribut ditunjukkan pada tabel berikut:
daftar nilai atribut spasi putih
| nilai atribut | spasi | karakter baris baru | Pembungkusan garis otomatis | pertama kali muncul di |
|---|---|---|---|---|
normal | menggabungkan | menelantarkan | mengizinkan | CSS 1 |
nowrap | menggabungkan | menelantarkan | tidak diperbolehkan | CSS 1 |
pre | menyimpan | menyimpan | tidak diperbolehkan | CSS 1 |
pre-wrap | menyimpan | menyimpan | mengizinkan | CSS 2.1 |
pre-line | menggabungkan | menyimpan | mengizinkan | CSS 2.1 |
( Catatan : Pada CSS1/2, atribut spasi hanya dapat diterapkan pada elemen tingkat blok; pada CSS 2.1, atribut dapat diterapkan pada semua elemen.)
Jika kita memerlukan elemen container yang memiliki perilaku pemrosesan spasi putih yang mirip dengan elemen <pre>, cukup atur gaya {white-space: pre;} untuk elemen tersebut.
Kebutuhan untuk pra-bungkus
Pertama-tama mari kita jelaskan perilaku "pembungkusan baris otomatis" pada tabel di atas. Ini mengacu pada aliran teks di dalam elemen yang diketik dalam arah teks. Ketika aliran teks menemui batas yang membatasi kelanjutannya, apakah akan membungkus baris. "Pembungkusan kata tidak diperbolehkan" berarti aliran teks akan melebihi elemen.
Oleh karena itu, gaya {white-space: pre;} terkadang tidak memenuhi harapan kita. Misalnya, dalam beberapa situasi yang tidak memerlukan ketelitian khusus, atau saat memformat beberapa cuplikan kode yang tidak sensitif terhadap jeda baris (seperti HTML atau CSS), kami tidak ingin baris kode yang panjang dalam cuplikan kode menyebabkannya elemen wadah untuk menggulir secara horizontal karena sulit dibaca. Kami berharap dalam hal ini, kode panjang akan dibungkus secara otomatis.
Saat ini, dengan membandingkan karakteristik perilaku yang berbeda dari setiap nilai atribut pada tabel di atas, kita akan menemukan bahwa nilai atribut pre-wrap menonjol - itulah yang kita butuhkan.