Tento článek ukazuje metodu, jak zabránit přetečení obsahu a povolit posouvání pomocí CSS.
Jak zastavit přetékání obsahu a povolit rolování?
Účelem zabránit přetékání obsahu je, aby se obsah vešel do svého kontejneru a neměl negativní dopad na výkon webu. Dokáže snadno porozumět kontextu a může zlepšit dostupnost pro uživatele. Pro podrobné vysvětlení pojďme diskutovat na příkladu:
Krok 1: Povolte posouvání s přetečením obsahu
Zpočátku začněte vytvořením tabulky uvnitř souboru HTML, na kterou bude aplikován efekt posouvání. Předpokládejme, že tabulka je již vytvořena a skládá se ze šesti řádků a sedmi sloupců a do tabulky jsou poskytnuta některá fiktivní data:
< stůl >
< tr >
< čt > Hlava 1 < / čt >
< čt > Hlava 2 < / čt >
< čt > Hlava 3 < / čt >
< čt > Hlava 4 < / čt >
< čt > Hlava 5 < / čt >
< čt > Hlava 6 < / čt >
< čt > Hlava 7 < / čt >
< / tr >
< tr >
< td > Řádek 1 < / td >
< td > Řádek 1 < / td >
< td > Řádek 1 < / td >
< td > Řádek 1 < / td >
< td > Řádek 1 < / td >
< td > Řádek 1 < / td >
< td > Řádek 1 < / td >
< / tr >
< tr >
< td > Řádek 2 < / td >
< td > Řádek 2 < / td >
< td > Řádek 2 < / td >
< td > Řádek 2 < / td >
< td > Řádek 2 < / td >
< td > Řádek 2 < / td >
< td > Řádek 2 < / td >
< / tr >
< tr >
< td > Řádek 3 < / td >
< td > Řádek 3 < / td >
< td > Řádek 3 < / td >
< td > Řádek 3 < / td >
< td > Řádek 3 < / td >
< td > Řádek 3 < / td >
< td > Řádek 3 < / td >
< / tr >
< tr >
< td > Řádek 4 < / td >
< td > Řádek 4 < / td >
< td > Řádek 4 < / td >
< td > Řádek 4 < / td >
< td > Řádek 4 < / td >
< td > Řádek 4 < / td >
< td > Řádek 4 < / td >
< / tr < tr >
< td > Řádek 5 < / td >
< td > Řádek 5 < / td >
< td > Řádek 5 < / td >
< td > Řádek 5 < / td >
< td > Řádek 5 < / td >
< td > Řádek 5 < / td >
< td > Řádek 5 < / td >
< / tr >
< tr >
< td > Řádek 6 < / td >
< td > Řádek 6 < / td >
< td > Řádek 6 < / td >
< td > Řádek 6 < / td >
< td > Řádek 6 < / td >
< td > Řádek 6 < / td >
< td > Řádek 6 < / td >
< / tr >
< / stůl >
Po provedení výše uvedeného fragmentu kódu vypadá webová stránka takto:
Výstup zobrazuje, že data tabulky jsou v hůře čitelném formátu a tabulka zabírá mnoho místa.
Krok 2: Nastavení efektu přetečení a posouvání Ve výše uvedeném úryvku kódu: Po provedení výše uvedeného fragmentu kódu vypadá webová stránka takto: Webová stránka ukazuje, že tabulka nyní spotřebovává méně místa a zabraňuje přetékání obsahu. Kromě toho byl povolen efekt rolování. Poznámka : Nastavením ' přetečení: auto “ nebo „ přetečení: rolovat “, mohou uživatelé povolit rolování pro přetékající obsah. Kromě toho, „ přepad: skrytý ” lze použít k úplnému zabránění přetečení. Vlastnosti „overflow-x“ a „overflow-y“ se využívají k ovládání přetečení a umožňují rolování na vodorovné a svislé ose. Zabraňuje přetečení obsahu a umožňuje posouvání vytvořit interaktivní responzivní design pro všechna zařízení. Tento článek ukazuje, jak zabránit přetečení obsahu a povolit rolování pomocí CSS.
Poté zabalte stůl s rodičem “
.přetékat {
šířka : 200 pixelů ;
výška : 200 pixelů ;
přetečení-x : auto ;
přetečení-y : auto ;
rolovací chování : hladký ;
}
Závěr