Artikel ini menunjukkan kaedah untuk menghentikan kandungan daripada melimpah dan mendayakan penatalan menggunakan CSS.
Bagaimana untuk Menghentikan Kandungan Melimpah dan Mendayakan Penatalan?
Tujuan untuk menghentikan kandungan daripada melimpah ialah kandungan tersebut sesuai dengan bekasnya dan tidak menjejaskan prestasi tapak web secara negatif. Ia boleh memahami konteks dengan mudah dan boleh meningkatkan kebolehaksesan kepada pengguna. Untuk penjelasan terperinci mari kita bincangkan melalui contoh:
Langkah 1: Dayakan Tatal dengan Limpahan Kandungan
Pada mulanya, mulakan dengan mencipta jadual di dalam fail HTML yang mana kesan penatalan akan digunakan. Mari kita anggap, jadual telah dibuat, dan ia terdiri daripada enam baris dan tujuh lajur, dan beberapa data tiruan disediakan pada jadual:
< meja >
< tr >
< ke > Ketua 1 < / ke >
< ke > Ketua 2 < / ke >
< ke > Ketua 3 < / ke >
< ke > Ketua 4 < / ke >
< ke > Ketua 5 < / ke >
< ke > Ketua 6 < / ke >
< ke > Ketua 7 < / ke >
< / tr >
< tr >
< td > Baris 1 < / td >
< td > Baris 1 < / td >
< td > Baris 1 < / td >
< td > Baris 1 < / td >
< td > Baris 1 < / td >
< td > Baris 1 < / td >
< td > Baris 1 < / td >
< / tr >
< tr >
< td > Baris 2 < / td >
< td > Baris 2 < / td >
< td > Baris 2 < / td >
< td > Baris 2 < / td >
< td > Baris 2 < / td >
< td > Baris 2 < / td >
< td > Baris 2 < / td >
< / tr >
< tr >
< td > Baris 3 < / td >
< td > Baris 3 < / td >
< td > Baris 3 < / td >
< td > Baris 3 < / td >
< td > Baris 3 < / td >
< td > Baris 3 < / td >
< td > Baris 3 < / td >
< / tr >
< tr >
< td > Baris 4 < / td >
< td > Baris 4 < / td >
< td > Baris 4 < / td >
< td > Baris 4 < / td >
< td > Baris 4 < / td >
< td > Baris 4 < / td >
< td > Baris 4 < / td >
< / tr >< tr >
< td > Baris 5 < / td >
< td > Baris 5 < / td >
< td > Baris 5 < / td >
< td > Baris 5 < / td >
< td > Baris 5 < / td >
< td > Baris 5 < / td >
< td > Baris 5 < / td >
< / tr >
< tr >
< td > Baris 6 < / td >
< td > Baris 6 < / td >
< td > Baris 6 < / td >
< td > Baris 6 < / td >
< td > Baris 6 < / td >
< td > Baris 6 < / td >
< td > Baris 6 < / td >
< / tr >
< / meja >
Selepas pelaksanaan coretan kod di atas, halaman web kelihatan seperti ini:
Output memaparkan bahawa data jadual berada dalam format yang kurang boleh dibaca dan banyak ruang diperoleh oleh jadual.
Langkah 2: Menetapkan Kesan Limpahan dan Tatal Dalam coretan kod di atas: Selepas pelaksanaan coretan kod di atas, halaman web kelihatan seperti ini: Halaman web menggambarkan bahawa jadual kini menggunakan lebih sedikit ruang dan menghentikan kandungan daripada melimpah. Selain itu, kesan tatal telah didayakan. Catatan : Dengan menetapkan “ limpahan: auto ” atau “ limpahan: tatal ”, pengguna boleh mendayakan tatal untuk kandungan yang melimpah. Selain itu, “ limpahan: tersembunyi ” boleh digunakan untuk mengelakkan limpahan sama sekali. Sifat 'overflow-x' dan 'overflow-y' digunakan untuk mengawal limpahan dan membolehkan penatalan pada paksi mendatar dan menegak. Ia menghalang kandungan daripada melimpah dan membolehkan penatalan untuk membuat reka bentuk responsif interaktif untuk semua peranti. Artikel ini telah menunjukkan cara untuk menghentikan kandungan daripada melimpah dan mendayakan penatalan menggunakan CSS.
Selepas itu, bungkus meja dengan ibu bapa '
.melimpah {
lebar : 200px ;
ketinggian : 200px ;
limpahan-x : auto ;
limpahan-y : auto ;
scroll-tingkah laku : licin ;
}
Kesimpulan