Овај чланак демонстрира метод за заустављање преливања садржаја и омогућавање померања помоћу ЦСС-а.
Како зауставити преливање садржаја и омогућити померање?
Сврха да се спречи преливање садржаја је да се садржај уклапа у свој контејнер и да не утиче негативно на перформансе веб локације. Може лако да разуме контекст и може да побољша приступачност на крају корисника. За детаљно објашњење хајде да разговарамо кроз пример:
Корак 1: Омогућите померање помоћу Цонтент Оверфлов-а
У почетку, почните са креирањем табеле унутар ХТМЛ датотеке на коју ће се применити ефекат померања. Претпоставимо да је табела већ креирана и састоји се од шест редова и седам колона, а неки лажни подаци су дати табели:
< сто >
< тр >
< тх > Глава 1 < / тх >
< тх > Глава 2 < / тх >
< тх > Глава 3 < / тх >
< тх > Глава 4 < / тх >
< тх > Глава 5 < / тх >
< тх > Глава 6 < / тх >
< тх > Глава 7 < / тх >
< / тр >
< тр >
< тд > Ред 1 < / тд >
< тд > Ред 1 < / тд >
< тд > Ред 1 < / тд >
< тд > Ред 1 < / тд >
< тд > Ред 1 < / тд >
< тд > Ред 1 < / тд >
< тд > Ред 1 < / тд >
< / тр >
< тр >
< тд > Ред 2 < / тд >
< тд > Ред 2 < / тд >
< тд > Ред 2 < / тд >
< тд > Ред 2 < / тд >
< тд > Ред 2 < / тд >
< тд > Ред 2 < / тд >
< тд > Ред 2 < / тд >
< / тр >
< тр >
< тд > Ред 3 < / тд >
< тд > Ред 3 < / тд >
< тд > Ред 3 < / тд >
< тд > Ред 3 < / тд >
< тд > Ред 3 < / тд >
< тд > Ред 3 < / тд >
< тд > Ред 3 < / тд >
< / тр >
< тр >
< тд > Ред 4 < / тд >
< тд > Ред 4 < / тд >
< тд > Ред 4 < / тд >
< тд > Ред 4 < / тд >
< тд > Ред 4 < / тд >
< тд > Ред 4 < / тд >
< тд > Ред 4 < / тд >
< / тр >< тр >
< тд > Ред 5 < / тд >
< тд > Ред 5 < / тд >
< тд > Ред 5 < / тд >
< тд > Ред 5 < / тд >
< тд > Ред 5 < / тд >
< тд > Ред 5 < / тд >
< тд > Ред 5 < / тд >
< / тр >
< тр >
< тд > Ред 6 < / тд >
< тд > Ред 6 < / тд >
< тд > Ред 6 < / тд >
< тд > Ред 6 < / тд >
< тд > Ред 6 < / тд >
< тд > Ред 6 < / тд >
< тд > Ред 6 < / тд >
< / тр >
< / сто >
Након извршења горњег исечка кода, веб страница изгледа овако:
Излаз приказује да су подаци табеле у мање читљивом формату и да табела заузима много простора.
Корак 2: Подешавање ефекта преливања и померања
Након тога, умотајте сто са родитељем “ <див> ” означите и доделите му класу “ преливати ”. Затим доделите следећа ЦСС својства том див елементу:
.оверфлов {
ширина : 200пк ;
висина : 200пк ;
оверфлов-к : ауто ;
преливање-и : ауто ;
скрол-понашање : глатка ;
}
У горњем исечку кода:
- Прво, вредност „200пк“ је обезбеђена за оба ЦСС „ ширина ' и ' висина ” својства. Поставља величину табеле која ће бити приказана на веб страници.
- Затим користите „ оверфлов-к ' и ' преливање-и ” да бисте омогућили померање и подесили „ ауто ” вредности на Кс и И-осу.
- На крају, поставите вредност ' глатка ' до ' скрол-понашање ” да бисте обезбедили беспрекорно корисничко искуство.
Након извршења горњег исечка кода, веб страница изгледа овако:
Веб страница илуструје да табела сада заузима мање простора и спречава преливање садржаја. Поред тога, омогућен је ефекат померања.
Белешка : Постављањем ' прелив: ауто ” или “ преливање: листање “, корисници могу да омогуће померање за садржај који је препун. Осим тога ' преливање: скривено ” се може користити за потпуно спречавање преливања.
Закључак
Својства “оверфлов-к” и “оверфлов-и” се користе за контролу преливања и омогућавање померања на хоризонталној и вертикалној оси. Спречава преливање садржаја и омогућава померање да би се направио интерактивни респонзивни дизајн за све уређаје. Овај чланак је показао како спречити преливање садржаја и омогућити померање помоћу ЦСС-а.