Kotak Gulung HTML

Nggawe kotak nganggo teks gulung nggunakake CSS lan HTML

Kotak gulungan HTML minangka kothak sing nambah baris gulung menyang sisih tengen lan ngisor nalika isi kothak luwih gedhe tinimbang dimensi kothak. Ing tembung liya, yen sampeyan duwe kothak sing cocog karo 50 tembung, lan sampeyan duwe teks saka 200 tembung, kothak gulir HTML bakal ngidini baris gulung supaya sampeyan bisa ndeleng tambahan 150 tembung. Ing standar HTML sing mung bisa push teks ekstra ing njaba kothak.

Nggawe gulungan HTML cukup gampang. Sampeyan mung kudu nyetel jembar lan dhuwur saka unsur sing pengin digulung banjur gunakake properti ngluwihi CSS kanggo nyetel carane sampeyan pengin nggulung.

Apa Apa karo Teks Ekstra?

Yen sampeyan duwe teks luwih saka bakal pas karo spasi ing tata letak, sampeyan duwe sawetara opsi:

Pilihan paling apik yaiku pilihan pungkasan: nggawe kothak teks gulung. Banjur teks ekstra isih bisa dibaca, nanging rancanganmu ora kompromi.

HTML lan CSS iki bakal dadi:

text here ....

Limpahan: otomatis; ngandhani browser kanggo nambah bar gulung yen perlu kanggo njaga teks kasebut nglimpirake wates div. Nanging supaya bisa digunakake, sampeyan uga butuh sifat gaya dhuwur lan dhuwur sing disetel ing div, supaya ana watesan sing bisa dilimpahake.

Sampeyan uga bisa ngilangi teks kanthi ngganti kebanjiran: otomatis; kanggo overflow: didhelikake; Yen sampeyan ninggalake properti overflow, teks kasebut bakal nyerang wates-wates div kasebut.

Sampeyan bisa Tambah Gulung Bar Kanggo Luwih saka Tèks Luwih

Yen sampeyan duwe gambar gedhe sing arep ditampilake ing papan sing luwih cilik, sampeyan bisa nambah bar gulung ngubengi kanthi cara sing padha karo teks.

Ing conto iki, gambar 400x509 ana ing paragraf 300x300.

Tabel Bisa Benefit saka Gulung Bar

Tabel informasi sing panjang bisa dadi angel banget kanggo maca kanthi cepet, nanging kanthi nglebokne ukuran sing winates lan nambah properti overflow, sampeyan bisa nggawe tabel kanthi akeh data sing ora njupuk papan sing ekstrim ing kaca .

Cara paling gampang kaya gambar lan teks, mung nambahake div ing meja, nyetel lebar lan dhuwure div kasebut, lan nambahake properti overflow:

300px; overflow: auto; height: 100px; ">
Name Phone Jennifer 502-5366 ....

Siji bab sing kedadeyan nalika sampeyan nindakake iki yaiku garis gulung horisontal biasane muncul amarga browser nganggep yen krom baris gulir tumpang tindhih meja. Ana akeh cara kanggo ndandani iki saka ngganti jembar meja lan liya-liyane. Nanging favoritku mung kanggo mateni gulungan horizontal kanthi jembar x 3 properti. Mung nambah overflow-x: disembunyikan; kanggo div, lan bakal mbusak garis gulung horisontal. Dadi manawa kanggo nyoba iki, amarga ana uga isi sing bakal ilang.

Firefox Ndhukung Nggunakake Tags TBODY kanggo Overflow

Siji fitur becik saka browser Firefox yaiku sampeyan bisa migunakake fitur overflow ing tag tabel utama kaya tbody and thead utawa tfoot. Iki tegese sampeyan bisa nyetel bar gulung ing isi tabel, lan sel header tetep berlabuh ing ndhuwur. Iki mung dianggo ing Firefox , sing banget ala, nanging fitur becik yen maca mung nggunakake Firefox. Nelusuri conto iki ing Firefox kanggo ndeleng apa tegese.

Name Phone
Jennifer 502-5366 ...