24/03/2016

Properti CSS White Space

24/03/2016

Css white-space berfungsi untuk mengatur baris teks di dalam elemen apakah teks akan mengalir melewati batas elemen atau mengisi baris baru tanpa harus melewati batas elemen dan lain sebagainya.


Nilai Properti CSS White Space

  • normal
  • nowrap
  • pre
  • pre-wrap
  • pre-line
  1. normal
    • Ini adalah value default untuk baris teks dimana teks akan membuat baris baru sebelum keluar melebihi batas elemen. Anda tidak perlu menuliskan sintaks apapun untuk value normal.
  2. nowrap
    • Value nowrap pada properti css white-space mendefinisikan bahwa teks akan dibiarkan mengalir dalam satu baris dan tidak terpengaruh oleh batas elemen. Jika teks tetap mengalir dalam satu baris melebihi induk elemen pembungkus utama, maka browser akan menampilkan scroll secara horizontal - kecuali jika anda memotong baris teks dengan tag <br>
  3. pre
    • Value pre pada properti css white-space mendefiniskan baris teks akan ditampilkan sama persis seperti yang anda ketikkan, baik spasi, line break atau paragraf, tapi juga membiarkan teks keluar dari batas elemen
  4. pre-wrap
    • Value pre-wrap pada properti css white-space sedikit hampir sama dengan value pre hanya saja apabila baris teks akan mengalir keluar melebihi batas elemen ia akan membuat baris baru sehingga baris teks tetap berada di dalam area pembungkusnya.
  5. pre-line
    • Jika pada value pre-wrap spasi akan ditampilkan sama persis seperti apa yang anda tulis, maka pada value pre-line jarak setiap per-kata hanya akan menampilkan satu spasi seperti pada umumnya walaupun anda mengetikkan lebih dari satu spasi.

Sintaks CSS White Space

Sintaks CSS

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
Contoh Penerapan Sintaks CSS White Space

Kembali ke CSS Font dan Teks