white-space adalah salah satu property pada css, sedangkan fungsinya untuk mengatur keseluruhan space(spasi) dalam paragraf.
walaupun property ini jarang saya gunakan karena dalam website velue default white-space sudah disetting normal, namun saya akan mencoba sebisa saya untuk share pengertian white-space, berikut
value white-space
berikut value white-space
- normal
- pre
- nowrap
- pre-wrap
- pre-line
- inherit(mewarisi)
contoh property white-space dalam inline style
white-space:normal
maksud dari white-space value normal ini adalah spasinya akan ditampilkan satu kali, walaupun sobat mengetikan spasi sebanyak seribu kali.
contoh kode
<div style="clear: both; background-color: lime; width: 500px; white-space: normal;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
tampilan
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
white-space:pre
maksud dari white-space value pre ini adalah spasinya akan ditampilkan sesuai dengan spasi yang sobat ketik
contoh kode
<div style="clear: both; background-color: lime; width: 500px; white-space: pre;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
tampilan
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
white-space:nowrap
maksud dari white-space value nowrap ini adalah spasinya akan ditampilkan satu kali(walau seribu spasi termaksud enter), dan hanya akan membuat line-break(baris baru) jika tag <br/> ditemukan
contoh kode
<div style="clear: both; background-color: lime; width: 500px; white-space: nowrap;">
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text
</div>
tampilan
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
white-space:pre-wrap
hampir mirip dengan pre
contoh kode
<div style="clear: both; background-color: lime; width: 500px; white-space: pre-wrap;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
tampilan
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
white-space:pre-line
maksud dari white-space value pre-line ini adalah spasinya akan ditampilkan hanya satu kali dan akan membuat baris baru jika sobat ketik enter
contoh kode
<div style="clear: both; background-color: lime; width: 500px; white-space: pre-line;">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
</div>
tampilan
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
contoh white-space dalam internal style kompleks
perhatikan code dibawah
<html>
<head>
<title>white-space css</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
body{background-color:pink;}
#misalwhite-space1{
white-space:normal;
}
#misalwhite-space2{
white-space:pre;
}
#misalwhite-space3{
white-space:nowrap;
}
#misalwhite-space4{
white-space:pre-wrap;
}
#misalwhite-space5{
white-space:pre-line;
}
#misalwhite-space6{
white-space:inherit;
}
.anggapsebagaikotak{
clear:both;
background-color:white;
width:400px;
margin:20px;
padding:10px;
}
</style>
</head>
<body>
<div class="anggapsebagaikotak" id="misalwhite-space1">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
normal
</div>
<div class="anggapsebagaikotak" id="misalwhite-space2">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
pre
</div>
<div class="anggapsebagaikotak" id="misalwhite-space3">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
ini text ini text ini text ini text<br/>
nowrap
</div>
<div class="anggapsebagaikotak" id="misalwhite-space4">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
pre-wrap
</div>
<div class="anggapsebagaikotak" id="misalwhite-space5">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
pre-line
</div>
<div class="anggapsebagaikotak" id="misalwhite-space6">
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
ini text ini text ini text ini text
inherit
</div>
<div style="clear:both;"></div>
<p>salam <a href="http://www.indaam.com" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>
untuk melihat hasilnya
- copy markup style diatas
- paste ke notepad
- save as (pilih all types) dengan nama contohwhite-space.htm
- jalankan(double click), atau
- open with (firefox, ie, opera, safari, chrome)
- silakan edit valuenya
- letak valuenya antara : (titik dua) dan ;(titik koma)
- selamat belajar
semoga bermanfaat
Sorry, formulir komentar sedang dalam perbaikan