CSS fungsi Property White-Space serta Valuenya

white-space adalah salah satu property pada css, sedangkan fungsinya untuk mengatur keseluruhan space(spasi) dalam paragraf, valuenya antara lain normal, pre, nowrap, pre-wrap, pre-line

Hanya ada dua kata yang menuntun Anda pada kesuksesan. Kata-kata itu adalah “ya” dan “tidak”. Tidak diragukan, Anda telah sangat ahli untuk berkata “ya”. Sekarang, berlatihlah berkata “tidak”. Cita-cita Anda bergantung padanya. Jack Canfield

white-space adalah salah satu property pada css, sedangkan fungsinya untuk mengatur keseluruhan space(spasi) dalam paragraf, valuenya antara lain normal, pre, nowrap, pre-wrap, pre-line

Last Modif at July 10th, 2011

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
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

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
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

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
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.net" 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.net" 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

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

2 thoughts on “CSS fungsi Property White-Space serta Valuenya”

  1. wah, trimakasih tutornya..
    manfaat banget…

  2. handy says:

    om misalnya misalnya ane masukin text ke database kaya gini :
    “Hobi :
    nonton djaslflasdfhasldhfasdjklhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhtestdjaslflasdfhasldhfasdjklhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhtest
    jalan jalan
    main musik”
    pas waktu ditampilin biar ga kayak gini :
    “hobi nonton jalan jalan main musik”
    ane siasatin pake tag , tapi pas ada text yang panjang kaya gini ‘djaslflasdfhasldhfasdjklhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhtestdjaslflasdfhasldhfasdjklhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhtest’ itu textnya malah tembus bodynya.
    mohon pencerahannya master.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-