Cara Menggunakan Property CSS white-space

Properti white-space menentukan bagaimana white space ditangani di dalam suatu elemen.

Spasi putih dapat berupa urutan spasi (dimasukkan menggunakan spasi atau tombol tab) atau jeda baris (dimasukkan menggunakan kunci kembali carriage (atau tombol Enter), atau <br/>). Properti ini akan menentukan bagaimana spasi putih dalam kode sumber elemen akan ditangani di dalam elemen ketika dirender pada halaman.

Ketika properti white-space tidak disetel, nilai default-nya adalah normal, spasi ekstra diciutkan menjadi satu, garis-garis baru dilepaskan, dan garis-garis dipecah dan dibungkus jika perlu untuk dimasukkan ke dalam wadah mereka. Jadi, jika, misalnya, Anda mengetik 2 spasi berturut-turut antara dua kata di editor, mereka akan diciutkan menjadi satu spasi di halaman.

Kadang-kadang Anda mungkin ingin mempertahankan ruang putih di dalam elemen Anda dan menampilkannya dengan cara yang sama seperti Anda menulisnya di editor kode Anda. Tab, spasi, dan baris baru penting ketika menulis kode untuk menjaga kejelasan kode yang mendapat manfaat dari pemformatan jenis ini, jadi Anda biasanya ingin kode ditampilkan dengan pemformatan yang sama pada halaman, terutama jika Anda sedang menulis bahasa pemrograman bergantung ruang-putih. Dalam hal ini, nilai pre memaksa browser untuk mempertahankan spasi putih dan jeda baris tambahan dan mencegah kata-kata membungkus di mana Anda tidak menginginkannya.

Nilai pra disebut seperti itu karena menerapkan gaya yang sama dengan padanan HTML-nya: elemen <pre>, yang biasanya digunakan untuk membungkus blok kode pada halaman.

Sekarang anggaplah Anda memang ingin mempertahankan spasi di sekitar kata-kata tetapi juga ingin kata-kata untuk membungkus dan tidak meluap wadah mereka, di situlah pra-bungkus masuk. Bagian memberitahu browser untuk menjaga spasi putih dan jeda baris, dan bungkus bagian memberitahu itu untuk membungkus garis di mana perlu masuk ke wadah mereka.

Di sisi lain, jika Anda ingin menutup spasi di antara kata-kata tetapi tidak ingin garis-garisnya membungkus, Anda dapat menerapkan nilai nowrap.

Nilai terakhir, pre-line, mirip dengan nilai pre-wrap, kecuali spasi putih diciutkan, dan hanya jeda baris yang dipertahankan. Garis-garis juga akan membungkus agar sesuai dengan wadahnya.

 

Trivia dan Catatan:

Properti white-space dapat digunakan dengan lebih dari sekedar teks, itu dapat diterapkan ke konten inline dalam suatu elemen. Ini digunakan dengan nilai nowrap kadang-kadang untuk membuat daftar horizontal gambar dalam elemen yang dapat digulir, dengan mencegah gambar membungkus dan memaksa mereka untuk ditampilkan pada satu baris tunggal di dalam wadah mereka.

 

Official Syntax:

white-space: normal | pre | nowrap | pre-wrap | pre-line

 

Values:

normal: Urutan spasi putih diciutkan, karakter garis baru dilepaskan, dan garis pecah bila diperlukan agar sesuai dengan wadahnya.

pre: Urutan ruang putih dan garis baru dipertahankan. Baris tidak akan membungkus atau menghancurkan kecuali di mana karakter baris baru atau garis istirahat menggunakan <br/> dalam kode sumber.

nowrap: Urutan ruang putih diciutkan menjadi satu seperti dengan nilai normal, tetapi seperti jeda baris sebelum ditekan (garis tidak dibungkus) dalam suatu elemen.

pre-wrap: Seperti pra, nilai ini mempertahankan urutan ruang putih, tetapi seperti normal, ini memungkinkan pembungkus garis, sehingga garis akan membungkus bila diperlukan agar sesuai dengan wadahnya.

pre-line: Seperti biasa, ia memecah urutan spasi putih menjadi satu tetapi mempertahankan karakter garis baru, sehingga garis memecah di mana karakter baris baru atau <br/> hadir dalam kode sumber, dan mereka juga akan membungkus bila perlu untuk dimasukkan ke dalam wadah mereka.

 

Catatan

Perhatikan bahwa nilai-nilai seperti pra yang mempertahankan karakter baris baru tidak akan mempertahankan karakter baris baru terakhir dalam sepotong teks

Tabel ini merangkum perilaku nilai yang berbeda dari properti white-space:

New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
pre Preserve Preserve No wrap
nowrap Collapse Collapse No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.