Buat kotak dengan menggulir teks menggunakan CSS dan HTML
Kotak gulir HTML adalah kotak yang menambahkan bilah gulir ke sisi kanan dan bawah ketika isi kotak lebih besar dari dimensi kotak. Dengan kata lain, jika Anda memiliki kotak yang dapat memuat sekitar 50 kata, dan Anda memiliki teks berisi 200 kata, sebuah kotak gulir HTML akan menempatkan bilah gulir ke atas untuk memungkinkan Anda melihat 150 kata tambahan. Dalam HTML standar yang hanya akan mendorong teks tambahan di luar kotak.
Membuat gulir HTML cukup mudah. Anda hanya perlu mengatur lebar dan tinggi dari elemen yang ingin Anda gulir dan kemudian menggunakan properti CSS overflow untuk mengatur bagaimana Anda ingin bergulir terjadi.
Apa yang Harus Dilakukan dengan Teks Tambahan?
Bila Anda memiliki lebih banyak teks daripada yang sesuai dengan ruang di tata letak Anda, Anda memiliki beberapa opsi:
- Tulis ulang teks sehingga lebih pendek dan sesuai.
- Biarkan teks mengalir melampaui batas dan harap tata letak dapat melenturkan untuk mendukungnya.
- Potong teks di mana itu meluap.
- Tambahkan bilah gulir (biasanya vertikal untuk teks) sehingga ruang bergulir untuk menampilkan teks tambahan.
Opsi terbaik biasanya adalah opsi terakhir: buat kotak teks bergulir. Kemudian teks tambahan masih bisa dibaca, tetapi desain Anda tidak terganggu.
HTML dan CSS untuk ini adalah:
Overflow: otomatis; memberi tahu peramban untuk menambahkan bilah gulir jika diperlukan untuk menjaga agar teks tidak meluber batas-batas div. Tetapi agar ini berfungsi, Anda juga perlu properti gaya lebar dan tinggi yang ditetapkan pada div, sehingga ada batasan untuk melimpah.
Anda juga dapat memotong teks dengan mengubah overflow: otomatis; meluap: tersembunyi ;. Jika Anda membiarkan properti overflow, teks akan meluber melewati batas div.
Anda Dapat Menambahkan Bilah Gulir ke Lebih dari Hanya Teks
Jika Anda memiliki gambar besar yang ingin Anda tampilkan di ruang yang lebih kecil, Anda dapat menambahkan bilah gulir di sekitarnya dengan cara yang sama seperti yang Anda lakukan dengan teks.
Dalam contoh ini, gambar 400x509 ada di dalam 300x300 paragraf.
Tabel Dapat Menggunakan Bilah Gulir
Panjang tabel informasi bisa sangat sulit untuk dibaca dengan sangat cepat, tetapi dengan menempatkan mereka di dalam div ukuran terbatas dan kemudian menambahkan properti overflow, Anda dapat menghasilkan tabel dengan banyak data yang tidak mengambil ruang ekstrim pada halaman Anda .
Cara termudah adalah seperti dengan gambar dan teks, cukup tambahkan div di sekeliling tabel, atur lebar dan tinggi div tersebut, dan tambahkan properti overflow:
| Nama | Telepon | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... Satu hal yang terjadi saat Anda melakukan ini adalah bilah gulir horizontal biasanya muncul karena browser menganggap bahwa chrome bilah gulir tumpang tindih dengan meja. Ada banyak cara untuk memperbaikinya dari mengubah lebar meja dan lainnya. Tetapi favorit saya adalah dengan hanya mematikan horizontal scrolling dengan CSS 3 overflow-x properti. Cukup tambahkan overflow-x: tersembunyi; ke div, dan itu akan menghapus bilah gulir horizontal. Pastikan untuk menguji ini, karena mungkin ada konten yang menghilang. Firefox Mendukung Menggunakan Tag TBODY untuk OverflowSalah satu fitur yang sangat bagus dari browser Firefox adalah Anda dapat menggunakan properti overflow pada label tabel dalam seperti tbody dan thead atau tfoot. Ini berarti Anda dapat mengatur scroll bar pada isi tabel, dan sel-sel header tetap berlabuh di atasnya. Ini hanya berfungsi di Firefox , yang terlalu buruk, tetapi ini adalah fitur yang bagus jika pembaca Anda hanya menggunakan Firefox. Jelajahi contoh ini di Firefox untuk melihat apa yang saya maksud.
|