Нека да видим класически пример за елемент, който е много малък за съдържанието си и който генерира преливане, тъй като всичко е по -лесно да се види чрез примери, първо нека видим един, преди да продължим да разглеждаме свойствата, които ни помагат да контролираме преливането.
ПримерИма много различни видове плодове - има само над 500 сорта банани. Докато добавим безбройните видове ябълки, портокали и други добре познати плодове, ние сме изправени пред хиляди възможности за избор.
Предишният код генерира следния резултат в браузъра:
overflow-x / overflow-y: Те определят поведението на хоризонтално или вертикално преливане.
Препълване: Това е пряк път за използване на предишното свойство и редът, в който работи, е overflow, overflow x, overflow y.
Свойствата, които могат да се използват с елемента препълване са както следва:кола: Тази стойност делегира на браузъра отговорността да реши какво да прави, обикновено това се случва, че лентата за превъртане се показва, когато елементът започне да се препълва, съдържащ го.
скрит: Съдържанието се показва до частта, която не прелива, скривайки останалото съдържание, няма механизми да каже на потребителя какво да направи, за да види останалото съдържание.
няма съдържание: Препълненото съдържание се премахва, ако не може да се побере в контейнера. Тази стойност не се поддържа от нито един от най -популярните браузъри
без дисплей: Съдържанието е скрито, ако не може да се покаже напълно. Тази стойност не се поддържа от нито един от най -популярните браузъри.
превъртане: Браузърът генерира лента за превъртане, позволяваща на потребителя винаги да вижда препълненото съдържание в контейнера. Лентата ще зависи от браузъра и системата, за да определи начина, по който се показва. Лентата за превъртане винаги ще бъде видима, дори ако елементът не препълва.
видимо: Това е стойността по подразбиране. Съдържанието винаги се показва, дори ако прелива.
Сега, когато имаме инструментите за атака на преливане, нека видим на практика как можем да го приложим, нищо по -добро от малък код, който да го демонстрира:ПримерИма много различни видове плодове - има само над 500 сорта банани. Докато добавим безбройните видове ябълки, портокали и други добре познати плодове, ние сме изправени пред хиляди възможности за избор.
Има много различни видове плодове - има само над 500 сорта банани. Докато добавим безбройните видове ябълки, портокали и други добре познати плодове, ние сме изправени пред хиляди възможности за избор.
Използвахме два елемента, за да демонстрираме как препълване, на първо място поставяме имота скрит където знаем, че само съдържанието ще се показва до мястото, където започва препълването, след това останалото е скрито и за второто ние използваме превъртане, с което ще се покаже лента за превъртане независимо дали елементът прелива или не, нека видим резултата:
