See artikkel tutvustab meetodit sisu ületäitumise peatamiseks ja CSS-i abil kerimise lubamiseks.
Kuidas peatada sisu ületäitumine ja lubada kerimine?
Sisu ületäitumise peatamise eesmärk on see, et sisu mahuks mahutisse ega mõjutaks negatiivselt veebisaidi toimivust. See mõistab hõlpsasti konteksti ja võib parandada juurdepääsu kasutajatele. Üksikasjaliku selgituse saamiseks arutleme näite kaudu:
1. toiming: lubage sisu ülevooluga kerimine
Alustuseks looge HTML-failis tabel, millele kerimise efekti rakendatakse. Oletame, et tabel on juba loodud ja see koosneb kuuest reast ja seitsmest veerust ning tabelisse on esitatud mõned näilikud andmed:
< laud >
< tr >
< th > Pea 1 < / th >
< th > Pea 2 < / th >
< th > Pea 3 < / th >
< th > Pea 4 < / th >
< th > Pea 5 < / th >
< th > Pea 6 < / th >
< th > Pea 7 < / th >
< / tr >
< tr >
< td > 1. rida < / td >
< td > 1. rida < / td >
< td > 1. rida < / td >
< td > 1. rida < / td >
< td > 1. rida < / td >
< td > 1. rida < / td >
< td > 1. rida < / td >
< / tr >
< tr >
< td > 2. rida < / td >
< td > 2. rida < / td >
< td > 2. rida < / td >
< td > 2. rida < / td >
< td > 2. rida < / td >
< td > 2. rida < / td >
< td > 2. rida < / td >
< / tr >
< tr >
< td > 3. rida < / td >
< td > 3. rida < / td >
< td > 3. rida < / td >
< td > 3. rida < / td >
< td > 3. rida < / td >
< td > 3. rida < / td >
< td > 3. rida < / td >
< / tr >
< tr >
< td > 4. rida < / td >
< td > 4. rida < / td >
< td > 4. rida < / td >
< td > 4. rida < / td >
< td > 4. rida < / td >
< td > 4. rida < / td >
< td > 4. rida < / td >
< / tr >< tr >
< td > 5. rida < / td >
< td > 5. rida < / td >
< td > 5. rida < / td >
< td > 5. rida < / td >
< td > 5. rida < / td >
< td > 5. rida < / td >
< td > 5. rida < / td >
< / tr >
< tr >
< td > 6. rida < / td >
< td > 6. rida < / td >
< td > 6. rida < / td >
< td > 6. rida < / td >
< td > 6. rida < / td >
< td > 6. rida < / td >
< td > 6. rida < / td >
< / tr >
< / laud >
Pärast ülaltoodud koodilõigu täitmist näeb veebileht välja selline:
Väljund näitab, et tabeliandmed on vähemloetavas vormingus ja tabel võtab palju ruumi.
2. samm: ülevoolu ja kerimise efekti määramine Ülaltoodud koodilõigul: Pärast ülaltoodud koodilõigu täitmist näeb veebileht välja selline: Veebileht näitab, et tabel võtab nüüd vähem ruumi ja takistab sisu ületäitumist. Lisaks on sisse lülitatud kerimisefekt. Märge : määrates ' ülevool: auto ” või „ ületäitumine: kerige ”, saavad kasutajad lubada ülevoolava sisu jaoks kerimise. Lisaks on ' ülevool: peidetud ” saab kasutada ülevoolu ärahoidmiseks. Atribuute „overflow-x” ja „overflow-y” kasutatakse ülevoolu juhtimiseks ning horisontaal- ja vertikaalteljel kerimise võimaldamiseks. See takistab sisu ületäitumist ja võimaldab kerida, et luua interaktiivne tundlik kujundus kõigi seadmete jaoks. See artikkel on näidanud, kuidas peatada sisu ületäitumine ja lubada CSS-i abil kerimine.
Pärast seda mähkige laud vanemaga '
.ülevool {
laius : 200 pikslit ;
kõrgus : 200 pikslit ;
ülevool-x : auto ;
ülevool-y : auto ;
kerimiskäitumine : sile ;
}
Järeldus