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.