На overflowконтролите собственост, което се случва за съдържание, почивките извън нейните граници: да си представят div, в които изрично сте настроен да бъде 200px широк, но съдържа изображение, което е 300px широк. Това изображение ще стърчи от div и ще бъде visibleпо подразбиране. Докато ако зададете overflowстойността на hidden, изображението ще се отреже на 200px.
div ( overflow: visible | hidden | scroll | auto | inherit )Стойности
visible: Съдържанието не се изрязва, когато продължава извън кутията му. Това е стойността по подразбиране на свойствотоhidden: препълващото съдържание ще бъде скрито.scroll: подобно на скрито, освен че потребителите ще могат да превъртат скритото съдържаниеauto: ако съдържанието продължава извън кутията си, това съдържание ще бъде скрито, докато лентата за превъртане трябва да бъде видима, за да могат потребителите да четат останалото съдържание.initial: използва стойността по подразбиране, която еvisibleinherit: задава препълването на стойността на своя родителски елемент.
Не забравяйте, че текстът естествено ще се увива в края на елемент (освен ако не се променя интервал), така че текстът рядко ще бъде причина за препълване. Освен ако не е зададена височина, текстът просто ще избута и елемент по-висок. Преливането влиза в действие по-често, когато са зададени явни ширини и височини и би било нежелателно каквото и да е съдържание да се разлива или когато изрично се избягва превъртането.
Видим
Ако изобщо не зададете свойството overflow, по подразбиране се вижда. Така че като цяло няма причина изрично да зададете това свойство на видимо, освен ако не го замените да не бъде зададено другаде.
Важното нещо, което трябва да запомните тук е, че въпреки че съдържанието се вижда извън кутията, това съдържание не влияе върху потока на страницата. Например:
Като цяло, така или иначе не трябва да задавате статични височини на кутии с уеб текст в тях, така че не трябва да излиза.
Скрити
Обратното на видимия по подразбиране е скрито . Това буквално скрива всяко съдържание, което се простира извън кутията.
Това е особено полезно при използване с динамично съдържание и възможност за преливане, причиняващо сериозни проблеми с оформлението. Имайте предвид обаче, че скритото по този начин съдържание е напълно недостъпно (с изключение на гледането на източника). Така например, потребителят има зададения по подразбиране размер на шрифта, по-голям от очаквания, може да изтласкате текст извън полето и да го скриете напълно от неговия поглед.
Превъртете
Задаването на стойност за преливане на поле за превъртане ще скрие съдържанието от изобразяване извън полето, но ще предложи ленти за превъртане, за да превъртите вътрешността на полето, за да видите съдържанието.
С тази стойност трябва да се отбележи, че получавате И ХОТИ хоризонтални и вертикални ленти за превъртане, независимо от това, дори ако съдържанието изисква само едното или другото.
Скролирането на инерцията на iOS може да бъде активирано за тази стойност с -webkit-overflow-scrolling.
Забележка: В OS X Lion, когато лентите за превъртане са настроени да се показват само когато се използват, се scrollдържи по-скоро като auto, че ще се покажат само необходимите ленти за превъртане.
Автоматичен
Автоматичното преливане е много подобно на стойността на превъртане, само че решава проблема с получаването на ленти за превъртане, когато не се нуждаете от тях. Лентите за превъртане ще се покажат само ако има съдържание, което действително се пробива от елемента.
overflow-x и overflow-y
Възможно е също така да се манипулира преливането на съдържание хоризонтално или вертикално с overflow-xи overflow-yсвойства. Например в демонстрацията под хоризонталното преливане може да се превърта, докато текстът, който се простира отвъд височината на полето, е скрит:
.box ( overflow-y: hidden; overflow-x: scroll; )Изчистване на поплавъка
Едно от най-популярните приложения за настройване на препълване, колкото и да е странно, е изчистването на поплавък. Настройката за преливане не изчиства поплавъка в елемента, той се самоизчиства. Това означава, че елементът с преливане (всяка стойност с изключение visible) ще се простира толкова голям, колкото е необходимо, за да обхване дъщерни елементи вътре, които са плаващи (вместо да се свиват), като се приеме, че височината не е декларирана. Като този:
По-добра техника за изчистване с плаваща заглавка е clearfix, тъй като не изисква да променяте свойството overflow по начин, който не ви е необходим.
Генериране на контекст за форматиране на блокове
Интересно е да се отбележи, че overflowсъщо така ще създаде нов контекст за форматиране на блок, който е полезен, ако искаме да подравним блок елемент до плаващ. В примера по-долу показваме как няколко абзаца ще взаимодействат с плаващо изображение по подразбиране и след това използваме overflow: hiddenза подравняване на текста в собственото му поле:
Това идва от страхотен пост на Никол Съливан, който продължи да вдъхновява медийния обект.
Могат ли лентите за превъртане да бъдат оформени с CSS?
Преди сте могли да оформяте ленти за превъртане в IE (v5.5?), Но не повече. Можете да ги оформите отново отново в браузърите WebKit. Ако имате нужда от персонализирани ленти за превъртане в различни браузъри, потърсете JavaScript.
Ако даден елемент трябва да има добавени ленти за превъртане, за да уважи препълващата стойност, Firefox ги поставя извън елемента, запазвайки видимата ширина / височина, както е декларирано. IE поставя лентите за превъртане вътре, запазвайки общата ширина / височина, както е декларирано.
Демонстрация
Демонстрации за тази статия, взети от тази примерна страница.
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 91 | 87 | 11. | 88 | TP |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Свързани
- Свойството float
Повече информация
- Разбиране на Humble Clearfix
- Преливане: тайна полза
- Преливане на MDN
- Преливане на W3C
- Намиране / фиксиране на неволно преливане на тялото