Rabu, 29 Mei 2013

Ganti penekanan enter menjadi baris baru


CSS tak ada habisnya untuk dibahas, kali ini saya mau membahas cara mengubah penekanan enter menjadi baris baru.

CONTOH 1

Lihatlah sumber dari halaman tersebut dan coba perhatikan dibawah kata specimen book. terdapat penekanan enter, tapi kenapa tidak ada jarak antar kalimat tersebut..? memang seperti itu hasilnya jika kita menulis didalam tag HTML jika tidak ada kode <br> maka tulisannya tidak akan terputus. Namun dengan adanya property white-space dari css bisa menjadi alternatif terbaik untuk kita. sekarang coba lihat lagi contoh dibawah ini

CONTOH 2

Tulisannya terlihat rapi bukan..? nah coba lihat sumber halaman tersebut masih sama seperti sebelumnya, yang berbeda hanya ada penambahan pada kode css yaitu white-space: pre-line; dan white-space: pre-wrap; dengan kode tersebutlah kalimat tersebut menjadi lebih rapi jadi tidak perlu tag <br> untuk memutuskan jarak sebuah kalimat. kenapa kodenya ada dua..? sebenarnya itu untuk fallback saja, kedua kode itu sama tapi agak sedikit berbeda. kode ini bisa anda manfaatkan untuk tulisan dieditor blogger atau keperluan lain.

untuk catatan saja, karena kodenya ada dua susun kodenya seperti dibawah ini

.namaclass {
white-space: pre-wrap; /* kode ini diatas */
white-space: pre-line; /* kode ini dibawah */
}

Kenapa harus seperti itu..? karena white-space: pre-line; lebih bagus dari pada white-space: pre-wrap; tapi dikarenakan ada juga browser yang tidak bisa membaca white-space: pre-line; maka white-space: pre-wrap; disimpan dibagian atas.