Тхе overflowпроперти контроле шта се дешава са садржајем који ломи ван њених граница: замислите divу којој сте се експлицитно подеси да буде 200пк ширине, али садржи слику која је широка 300пк. Та слика ће стршити из див-а и биће visibleподразумевано. Ако поставите overflowвредност на hidden, слика ће бити одсечена на 200 пиксела.
div ( overflow: visible | hidden | scroll | auto | inherit )Вредности
visible: садржај се не исече када се креће изван оквира. Ово је подразумевана вредност својстваhidden: преплављени садржај ће бити сакривен.scroll: слично скривеном, осим што ће корисници моћи да се крећу кроз скривени садржајauto: ако се садржај одвија изван оквира, тај садржај ће бити сакривен, док би трака за помицање требала бити видљива како би корисници могли читати остатак садржаја.initial: користи подразумевану вредност која јеvisibleinherit: поставља прелив на вредност свог надређеног елемента.
Имајте на уму да ће се текст природно умотати на крај елемента (осим ако се размак не промени), па ће текст ретко бити узрок преливања. Ако се не постави висина, текст ће само погурати и елемент виши. Преливање долази у обзир чешће када се поставе експлицитне ширине и висине и било би нежељено да се било који садржај просипа или када је помицање изричито избјегнуто.
Видљиво
Ако уопште не подесите својство преливања, подразумевано је видљиво. Дакле, генерално, нема разлога да ово својство изричито подесите на видљиво, осим ако га не замените другим подешавањем.
Овде је важно имати на уму да, иако је садржај видљив изван оквира, тај садржај не утиче на ток странице. На пример:
Генерално, ионако не бисте требали постављати статичке висине на кутије у којима се налази веб текст, па не би требало да се појављују.
Сакривен
Супротно од подразумеване видљивости је скривено . Ово дословно сакрива било који садржај који се протеже изван оквира.
Ово је посебно корисно у употреби са динамичким садржајем и могућношћу преливања које узрокује озбиљне проблеме са распоредом. Међутим, имајте на уму да је садржај који је сакривен на овај начин крајње неприступачан (осим прегледа извора). Тако на пример, кориснику је задата величина фонта постављена већа него што бисте очекивали, можда гурате текст изван оквира и сакривате га у потпуности од његовог погледа.
Свитак
Постављање вредности преливања оквира за помицање сакриће садржај од приказивања изван оквира, али ће понудити траке за помицање за помицање унутрашњости оквира за преглед садржаја.
Са овом вредношћу треба напоменути да ћете добити ОБОЈЕ хоризонталних и вертикалних клизача без обзира на све, чак и ако садржај захтева само једно или друго.
иОС-ово померање импулса може се омогућити за ову вредност помоћу -webkit-overflow-scrolling.
Напомена: У ОС Кс Лион, када су траке за померање постављене да се приказују само када се користе, scrollпонаша се више као autoда ће се приказати само потребне траке за помицање.
Ауто
Аутоматско преливање је врло слично вредности померања, само што решава проблем добијања клизача када вам нису потребни. Клизачи ће се приказати само ако постоји садржај који стварно избија из елемента.
оверфлов-к и оверфлов-и
Такође је могуће да манипулише преливање садржаја хоризонтално или вертикално са overflow-xи overflow-yсвојствима. На пример, у демонстрацији испод водоравног преливања можете се померити док је текст који се протеже изнад висине оквира скривен:
.box ( overflow-y: hidden; overflow-x: scroll; )Флоат Цлеаринг
Једна од најпопуларнијих употреба подешавања преливања, зачудо је чишћење пловка. Постављање преливања не уклања пловак на елементу, он се само-брише. То значи да ће се елемент са преливом (било која вредност осим visible) проширити онолико колико му је потребно да обухвати подређене елементе који су плутајући (уместо да се сруше), под претпоставком да висина није декларисана. Овако:
Боља техника плутајућег чишћења је цлеарфик, јер не захтева да промените својство преливања на начин који вам није потребан.
Генерирање контекста форматирања блока
Занимљиво је напоменути да overflowће се створити и нови контекст форматирања блока који је користан ако желимо да поравнамо елемент блока поред плутајућег. У примеру испод приказујемо како ће одређени број пасуса подразумевано деловати са плутајућом сликом, а затим користимо overflow: hiddenза поравнавање текста у свом оквиру:
Ово долази из сјајног поста Ницоле Сулливан који је наставио да инспирише медијски објекат.
Могу ли се клизачи обликовати помоћу ЦСС-а?
Некада сте могли да обликујете клизаче у ИЕ (в5.5?), Али не више. Можете их поново стилизовати у прегледачима ВебКит. Ако су вам потребне прилагођене клизаче у више прегледача, потражите ЈаваСцрипт.
Ако елементу треба додати клизаче како би се уважила вредност преливања, Фирефок их ставља изван елемента, задржавајући видљиву ширину / висину како је декларисано. ИЕ ставља клизаче унутра, задржавајући укупну ширину / висину како је декларисано.
Демо
Демонстрације за овај чланак преузете са ове огледне странице.
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | ТП |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Повезан
- Власништво пловка
Више информација
- Разумевање Хумбле Цлеарфик-а
- Преливање: тајна корист
- Прелив на МДН
- Прелив на В3Ц
- Проналажење / поправљање ненамерног преливања тела