Tento článok ukazuje spôsob, ako zastaviť pretečenie obsahu a povoliť posúvanie pomocou CSS.
Ako zastaviť pretečenie obsahu a povoliť rolovanie?
Účelom zabrániť pretečeniu obsahu je, aby sa obsah zmestil do svojho kontajnera a nemal negatívny vplyv na výkon webovej stránky. Dokáže ľahko pochopiť kontext a môže zlepšiť dostupnosť pre používateľov. Pre podrobné vysvetlenie poďme diskutovať na príklade:
Krok 1: Povoľte posúvanie s pretečením obsahu
Najprv začnite vytvorením tabuľky v súbore HTML, na ktorý sa použije efekt posúvania. Predpokladajme, že tabuľka je už vytvorená a pozostáva zo šiestich riadkov a siedmich stĺpcov a do tabuľky sú poskytnuté nejaké fiktívne údaje:
< tabuľky >
< tr >
< th > Hlava 1 < / th >
< th > Hlava 2 < / th >
< th > Hlava 3 < / th >
< th > Hlava 4 < / th >
< th > Hlava 5 < / th >
< th > Hlava 6 < / th >
< th > Hlava 7 < / th >
< / tr >
< tr >
< td > 1. riadok < / td >
< td > 1. riadok < / td >
< td > 1. riadok < / td >
< td > 1. riadok < / td >
< td > 1. riadok < / td >
< td > 1. riadok < / td >
< td > 1. riadok < / td >
< / tr >
< tr >
< td > 2. riadok < / td >
< td > 2. riadok < / td >
< td > 2. riadok < / td >
< td > 2. riadok < / td >
< td > 2. riadok < / td >
< td > 2. riadok < / td >
< td > 2. riadok < / td >
< / tr >
< tr >
< td > 3. riadok < / td >
< td > 3. riadok < / td >
< td > 3. riadok < / td >
< td > 3. riadok < / td >
< td > 3. riadok < / td >
< td > 3. riadok < / td >
< td > 3. riadok < / td >
< / tr >
< tr >
< td > 4. riadok < / td >
< td > 4. riadok < / td >
< td > 4. riadok < / td >
< td > 4. riadok < / td >
< td > 4. riadok < / td >
< td > 4. riadok < / td >
< td > 4. riadok < / td >
< / tr < tr >
< td > 5. riadok < / td >
< td > 5. riadok < / td >
< td > 5. riadok < / td >
< td > 5. riadok < / td >
< td > 5. riadok < / td >
< td > 5. riadok < / td >
< td > 5. riadok < / td >
< / tr >
< tr >
< td > 6. riadok < / td >
< td > 6. riadok < / td >
< td > 6. riadok < / td >
< td > 6. riadok < / td >
< td > 6. riadok < / td >
< td > 6. riadok < / td >
< td > 6. riadok < / td >
< / tr >
< / tabuľky >
Po vykonaní vyššie uvedeného útržku kódu bude webová stránka vyzerať takto:
Výstup zobrazuje, že údaje tabuľky sú v menej čitateľnom formáte a tabuľka zaberá veľa miesta.
Krok 2: Nastavenie efektu pretečenia a rolovania Vo vyššie uvedenom útržku kódu: Po vykonaní vyššie uvedeného útržku kódu bude webová stránka vyzerať takto: Webová stránka ukazuje, že tabuľka teraz zaberá menej miesta a zabraňuje pretečeniu obsahu. Okrem toho bol povolený efekt posúvania. Poznámka : Nastavením „ prepad: auto “ alebo „ pretečenie: rolovať “, používatelia môžu povoliť posúvanie pre pretekajúci obsah. Okrem toho, „ prepad: skrytý ” možno použiť na úplné zabránenie pretečeniu. Vlastnosti „overflow-x“ a „overflow-y“ sa využívajú na ovládanie pretečenia a umožňujú posúvanie na horizontálnej a vertikálnej osi. Zabraňuje pretečeniu obsahu a umožňuje posúvanie, aby sa vytvoril interaktívny responzívny dizajn pre všetky zariadenia. Tento článok ukázal, ako zabrániť pretečeniu obsahu a povoliť posúvanie pomocou CSS.
Potom zabaľte stôl s rodičom “
.prepad {
šírka : 200 pixelov ;
výška : 200 pixelov ;
prepad-x : auto ;
pretekať-y : auto ;
rolovacie správanie : hladké ;
}
Záver