white space pada CSS

bagaimana cara mengatur jarak antara baris kosong atau white-space dengan CSS menggunakan white space

white-space adalah properti CSS yang digunakan untuk mengatur bagaimana white-space ditangani pada sebuah situs

Nilai white-space bisa diisi dengan:

normal (detaul)
nowrap
pre
pre-line
pre-wrap
inherit (mengikut parentnnya)

normal pada white-space


<p style="white-space: normal;"> 
    WHITE-SPACE: NORMAL ->
    TIDAK PEDULI JARAK KOSONG 
    TAPI AKAN MEMBUNGKUS KE BARIS BERIKUTNYA SAAT KELUAR BATAS
</p>

Hasil

WHITE-SPACE: NORMAL -> TIDAK PEDULI JARAK KOSONG TAPI AKAN MEMBUNGKUS KE BARIS BERIKUTNYA SAAT KELUAR BATAS

Nowrap pada white-space

Nowrap berarti tulisannya tidak akan terbungkus meskipun melewati batas

<p style="white-space: nowrap;"> 
    WHITE-SPACE: NOWRAP ->
    TIDAK PEDULI JARAK KOSONG 
    DAN TIDAK MEMBUNGKUS WALAUPUN KELUAR BATAS
</p>

Hasil

WHITE-SPACE: NOWRAP -> TIDAK PEDULI JARAK KOSONG DAN TIDAK MEMBUNGKUS WALAUPUN KELUAR BATAS SEJAUH APAPUN TULISANNYA BERJALAN

Pre pada white-space

Pre akan mengikuti bagaimana tulisannya dalam HTML, mulai dari jarak awal, jumlah white space kosong dan juga baris baru (line break). Namun jika melewati baris akan lanjut begitu saja

<p style="white-space: pre;"> 
    WHITE-SPACE:   PRE ->
    mengikuti jarak kosong aslinya
    seperti ini jika tulisan dari ini sangatlah panjang sehingga ia melewati batas dari lebar yang ditentukan aslinya, lihat sendiri apa yang terjadi
</p>

Hasil

WHITE-SPACE: PRE -> mengikuti jarak kosong aslinya seperti ini jika tulisan dari ini sangatlah panjang sehingga ia melewati batas dari lebar yang ditentukan aslinya, lihat sendiri apa yang terjadi

Pre-wrap pada white-space

Perbedaan pre dan Pre wrap , pre-wrap akan wrap atau membungkus tulisan jika melwati bari

<p style="white-space: pre-wrap;"> 
    WHITE-SPACE:     pre-wrap ->
    mengikuti jarak kosong aslinya
    seperti ini jika tulisan dari ini sangatlah panjang sehingga ia melewati batas dari lebar yang ditentukan aslinya, lihat sendiri apa yang terjadi
</p>

Hasil

WHITE-SPACE: pre-wrap -> mengikuti jarak kosong aslinya seperti ini jika tulisan dari ini sangatlah panjang sehingga ia melewati batas dari lebar yang ditentukan aslinya, lihat sendiri apa yang terjadi

Pre-line pada white-space

Pre line akan membuat beberapa white-space menjadi satu saja, namun akan membuat line-break pada baris baru

<p style="white-space: pre-line;"> 
    WHITE-SPACE:     pre-line ->
    mengikuti jarak kosong aslinya
    itu dia!
</p>

Hasil

WHITE-SPACE: pre-line -> mengikuti jarak kosong aslinya itu dia!

word spacing pada CSS

Text shadow pada CSS

💅 Edit halaman ini