Buat kotak dengan teks menatal menggunakan CSS dan HTML
Kotak skrol HTML ialah kotak yang menambah bar tatal ke bahagian kanan dan bawah apabila kandungan kotak lebih besar daripada dimensi kotak. Dengan kata lain, jika anda mempunyai kotak yang boleh memuatkan kira-kira 50 perkataan, dan anda mempunyai teks sebanyak 200 perkataan, kotak skrol HTML akan meletakkan bar bergulir untuk membolehkan anda melihat 150 perkataan tambahan. Dalam HTML standard yang hanya akan menolak teks tambahan di luar kotak.
Membuat skrol HTML agak mudah. Anda hanya perlu menetapkan lebar dan ketinggian elemen yang ingin anda tatal dan kemudian gunakan sifat melimpah CSS untuk menetapkan bagaimana anda mahu penggiliran berlaku.
Apa yang perlu dilakukan dengan teks tambahan?
Apabila anda mempunyai lebih banyak teks daripada yang sesuai dengan ruang pada susun atur anda, anda mempunyai beberapa pilihan:
- Tulis semula teks agar lebih pendek dan sesuai.
- Benarkan teks mengalir di luar sempadan dan berharap susun atur dapat membengkok untuk menyokongnya.
- Potong teks di mana ia melimpah.
- Tambah bar skrol (biasanya menegak untuk teks) supaya skrol ruang untuk menunjukkan teks tambahan.
Pilihan terbaik biasanya ialah pilihan terakhir: buat kotak teks menatal. Kemudian teks tambahan masih boleh dibaca, tetapi reka bentuk anda tidak dikompromi.
HTML dan CSS untuk ini adalah:
Limpahan: auto; memberitahu penyemak imbas untuk menambah bar skrol jika diperlukan untuk menyimpan teks daripada meluap sempadan div. Tetapi agar ini berfungsi, anda juga memerlukan ciri-ciri gaya lebar dan ketinggian yang ditetapkan di atas div, supaya ada batas-batas melimpah.
Anda juga boleh memotong teks dengan menukar limpahan: auto; untuk melimpah: tersembunyi ;. Sekiranya anda melepaskan harta limpahan, teks akan melumpuhkan sempadan div.
Anda Boleh Tambah Bar Scroll ke Lebih daripada Teks Hanya
Jika anda mempunyai imej besar yang anda ingin paparkan di ruang yang lebih kecil, anda boleh menambah bar skrol di sekitarnya dengan cara yang sama dengan teks anda.
Dalam contoh ini, imej 400x509 berada di dalam perenggan 300x300.
Jadual-jadual boleh Manfaat dari Bar Scroll
Maklumat lama boleh menjadi sangat sukar untuk dibaca dengan cepat, tetapi dengan memasukkannya ke dalam div saiz yang terhad dan kemudian menambah harta limpahan, anda boleh menjana jadual dengan banyak data yang tidak mengambil ruang ekstrim pada halaman anda .
Cara yang paling mudah sama seperti dengan imej dan teks, hanya tambah div di sekeliling meja, tetapkan lebar dan ketinggian div tersebut, dan tambahkan harta limpahan:
| Name | Phone | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... Satu perkara yang berlaku apabila anda melakukan ini ialah bar tatal mendatar biasanya muncul kerana pelayar menganggap bahawa krom bar tatal bertindih di atas meja. Terdapat banyak cara untuk memperbaikinya daripada mengubah lebar meja dan lain-lain. Tetapi kegemaran saya adalah dengan hanya mematikan menatal mendatar dengan sifat-sifat CSS3 overflow-x. Hanya tambah limpahan-x: tersembunyi; ke div, dan itu akan mengeluarkan bar skrol mendatar. Pastikan untuk menguji ini, kerana kandungan mungkin hilang. Firefox Menyokong Menggunakan Tag TBODY untuk LimpahanSatu ciri yang sangat baik dari penyemak imbas Firefox adalah bahawa anda boleh menggunakan overflow property pada tag dalam batch seperti tbody dan thead atau tfoot. Ini bermakna anda boleh menetapkan bar skrol pada kandungan jadual, dan sel header tetap berlabuh di atasnya. Ini hanya berfungsi di Firefox , yang terlalu buruk, tetapi ia adalah ciri yang bagus jika pembaca anda hanya menggunakan Firefox. Semak imbas contoh ini di Firefox untuk melihat apa yang saya maksudkan.
|