Тази статия демонстрира метода за спиране на препълването на съдържанието и активиране на превъртане с помощта на CSS.
Как да спрете препълването на съдържанието и да активирате превъртането?
Целта да се спре съдържанието от преливане е съдържанието да се побере в контейнера си и да не повлияе отрицателно на ефективността на уебсайта. Той може лесно да разбере контекста и може да подобри достъпността до края на потребителите. За подробно обяснение нека обсъдим чрез пример:
Стъпка 1: Активирайте превъртане с препълване на съдържание
Първоначално започнете със създаване на таблица в HTML файла, върху която ще се приложи ефектът на превъртане. Да приемем, че таблицата вече е създадена и се състои от шест реда и седем колони и някои фиктивни данни са предоставени на таблицата:
< маса >
< тр >
< th > Глава 1 < / th >
< th > Глава 2 < / th >
< th > Глава 3 < / th >
< th > Глава 4 < / th >
< th > Глава 5 < / th >
< th > Глава 6 < / th >
< th > Глава 7 < / th >
< / тр >
< тр >
< td > Ред 1 < / td >
< td > Ред 1 < / td >
< td > Ред 1 < / td >
< td > Ред 1 < / td >
< td > Ред 1 < / td >
< td > Ред 1 < / td >
< td > Ред 1 < / td >
< / тр >
< тр >
< td > Ред 2 < / td >
< td > Ред 2 < / td >
< td > Ред 2 < / td >
< td > Ред 2 < / td >
< td > Ред 2 < / td >
< td > Ред 2 < / td >
< td > Ред 2 < / td >
< / тр >
< тр >
< td > Ред 3 < / td >
< td > Ред 3 < / td >
< td > Ред 3 < / td >
< td > Ред 3 < / td >
< td > Ред 3 < / td >
< td > Ред 3 < / td >
< td > Ред 3 < / td >
< / тр >
< тр >
< td > Ред 4 < / td >
< td > Ред 4 < / td >
< td > Ред 4 < / td >
< td > Ред 4 < / td >
< td > Ред 4 < / td >
< td > Ред 4 < / td >
< td > Ред 4 < / td >
< / тр >< тр >
< td > Ред 5 < / td >
< td > Ред 5 < / td >
< td > Ред 5 < / td >
< td > Ред 5 < / td >
< td > Ред 5 < / td >
< td > Ред 5 < / td >
< td > Ред 5 < / td >
< / тр >
< тр >
< td > Ред 6 < / td >
< td > Ред 6 < / td >
< td > Ред 6 < / td >
< td > Ред 6 < / td >
< td > Ред 6 < / td >
< td > Ред 6 < / td >
< td > Ред 6 < / td >
< / тр >
< / маса >
След изпълнението на горния кодов фрагмент уеб страницата изглежда така:
Изходът показва, че данните от таблицата са в по-малко четим формат и таблицата заема много място.
Стъпка 2: Задаване на ефект на преливане и превъртане В горния кодов фрагмент: След изпълнението на горния кодов фрагмент уеб страницата изглежда така: Уеб страницата показва, че таблицата вече заема по-малко място и предотвратява препълването на съдържанието. В допълнение, ефектът на превъртане е активиран. Забележка : чрез настройка „ преливане: авто ' или ' преливане: превъртане ”, потребителите могат да активират превъртане за преливащо съдържание. Освен това „ преливане: скрито ” може да се използва, за да се предотврати напълно препълването. Свойствата „overflow-x“ и „overflow-y“ се използват за контролиране на преливането и позволяване на превъртане по хоризонталната и вертикалната ос. Предотвратява препълването на съдържанието и дава възможност за превъртане, за да се създаде интерактивен отзивчив дизайн за всички устройства. Тази статия демонстрира как да спрете препълването на съдържанието и да активирате превъртането с помощта на CSS.
След това увийте масата с родител “
.препълване {
ширина : 200 пиксела ;
височина : 200 пиксела ;
преливане-x : Автоматичен ;
преливане-y : Автоматичен ;
превъртане-поведение : гладка ;
}
Заключение