Kasusnya disini adalah pada saat, misalkan kita punya sebuah form disitu terdapat textarea, dan pada text area tersebut kita memasukan isian yang dimana kita menggunakan "enter" atau "baris baru" untuk merapihkan tulisan kita, cuma pada saat kita tampilkan, data yang harusnya ada "enter" didalamnya tapi malah tampil tanpa ada "enter" jadi tampilnya memanjang menjadi satu baris.
Apa kamu pernah mengalami hal tersebut ? kalau saya pernah.
Nah di pembahasan kali ini saya ingin berbagi trik untuk menyelesaikan masalah tersebut, caranya bagaimana ? cukup sederhana, kita bisa menggunakan tag <pre></pre> . Tapi untuk melakukan itu kita tidak bisa hanya menggunakan tag tersebut secara mentah, ada properti tambahan yang harus kamu tambahkan di CSS.
Silahkan tambahkan properti css berikut sebelum kita menggunakan tag <pre></pre> :
pre {
white-space: pre-wrap;
word-wrap: break-word;
font-family: inherit;
}
Keterangan :
white-space berfungsi untuk tidak mengabaikan spasi, jadi maksudnya ketika dalam sebuah text ada spasi maka spasi tersebut akan tampil apa adanya. Contohnya pada saat kita menggunakan text yag menjorok kedalam, sebenarnya di bagian tersebut terdapat banyak spasi yang membuat text bisa menjorok kedalam, nah dengan ini maka si spasi tersebut akan di tampilkan sesuai spasi yang sudah kita diawal, jadi gak bakal kena trim intinya.
word-wrap sama seperti white-space cuma bedanya ini untuk "enter" atau "baris baru".
font-family berfungsi untuk merubah tipe font style saja.
Nah jika propertinya sudah ditambahkan di css, barulah kamu bisa menggunakan tag <pre></pre>. Penggunaannya sederhana, mungkin kamu pun sudah tahu :)
<pre>...letakan text-nya disini...</pre>
Mungkin saya cukupkan sampai disini dulu untuk postingan kali ini, semoga bermanfaat, terima kasih :)
Posting Komentar