Te overflowkontrole własności, co dzieje się treści, które przerwy poza jego granicami: wyobraź sobie div, w którym już jawnie ustawiona na 200px szerokości, ale zawiera obraz, który jest 300px szerokości. Ten obraz będzie wystawał poza div i będzie visibledomyślnie. Natomiast jeśli ustawisz overflowwartość na hidden, obraz będzie obcięty przy 200px.
div ( overflow: visible | hidden | scroll | auto | inherit )Wartości
visible: zawartość nie jest przycinana, gdy wychodzi poza ramkę. To jest domyślna wartość właściwościhidden: przepełniona zawartość zostanie ukryta.scroll: podobny do ukrytego, z wyjątkiem tego, że użytkownicy będą mogli przewijać ukrytą zawartośćauto: jeśli treść wychodzi poza swoje pole, wówczas ta treść zostanie ukryta, podczas gdy pasek przewijania powinien być widoczny, aby użytkownicy mogli przeczytać resztę treści.initial: używa wartości domyślnej, czylivisibleinherit: ustawia przepełnienie na wartość elementu nadrzędnego.
Pamiętaj, że tekst będzie naturalnie zawijany na końcu elementu (chyba że zostanie zmieniony odstęp), więc tekst rzadko będzie przyczyną przepełnienia. O ile nie zostanie ustawiona wysokość, tekst po prostu podniesie również element. Przepełnienie pojawia się częściej, gdy ustawione są jawne szerokości i wysokości i byłoby niepożądane, aby jakakolwiek zawartość się rozlała lub gdy wyraźnie unika się przewijania.
Widoczny
Jeśli w ogóle nie ustawisz właściwości przepełnienia, wartość domyślna jest widoczna. Ogólnie rzecz biorąc, nie ma powodu, aby jawnie ustawić tę właściwość na visible, chyba że nadpisujesz ją z innego miejsca.
Ważną rzeczą do zapamiętania jest tutaj to, że chociaż treść jest widoczna poza ramką, nie wpływa ona na przepływ strony. Na przykład:
Ogólnie rzecz biorąc, i tak nie powinieneś ustawiać statycznych wysokości dla pudełek z tekstem internetowym, więc nie powinno się to pojawiać.
Ukryty
Przeciwieństwo domyślnego widoczności jest ukryte . To dosłownie ukrywa każdą zawartość, która wykracza poza pudełko.
Jest to szczególnie przydatne w przypadku dynamicznej zawartości i możliwości przepełnienia powodującego poważne problemy z układem. Należy jednak pamiętać, że treści, które są ukryte w ten sposób, są całkowicie niedostępne (z wyjątkiem przeglądania źródła). Na przykład użytkownik ma ustawiony domyślny rozmiar czcionki większy niż można by się spodziewać, możesz wypychać tekst poza ramkę i całkowicie ukrywać go przed ich widokiem.
Zwój
Ustawienie wartości przepełnienia pola do przewijania spowoduje ukrycie zawartości przed renderowaniem poza polem, ale zaoferuje paski przewijania do przewijania wnętrza pola w celu wyświetlenia zawartości.
Warto zauważyć, że w przypadku tej wartości otrzymujesz ZARÓWNO poziome i pionowe paski przewijania bez względu na wszystko, nawet jeśli zawartość wymaga tylko jednego lub drugiego.
Przewijanie pędu w iOS można włączyć dla tej wartości za pomocą -webkit-overflow-scrolling.
Uwaga: w systemie OS X Lion, gdy paski przewijania są ustawione tak, aby pokazywały się tylko wtedy, gdy są używane, scrollzachowuje się bardziej podobnie auto, w tym, że pojawią się tylko potrzebne paski przewijania.
Automatyczny
Automatyczne przepełnienie jest bardzo podobne do wartości przewijania, tylko rozwiązuje problem pobierania pasków przewijania, gdy ich nie potrzebujesz. Paski przewijania pojawią się tylko wtedy, gdy istnieje treść, która faktycznie wyłamuje się z elementu.
overflow-x i overflow-y
Możliwe jest również manipulowanie przepełnieniem zawartości w poziomie lub w pionie za pomocą właściwości overflow-xi overflow-y. Na przykład w pokazie poniżej przepełnienie w poziomie można przewijać, podczas gdy tekst wychodzący poza wysokość ramki jest ukryty:
.box ( overflow-y: hidden; overflow-x: scroll; )Rozliczanie pływaka
Co dziwne, jednym z bardziej popularnych zastosowań ustawiania przepełnienia jest czyszczenie pływaka. Ustawienie przepełnienia nie usuwa pływaka na elemencie, usuwa się samoczynnie. Oznacza to, że element z przepełnieniem (dowolna wartość z wyjątkiem visible) będzie tak duży, jak potrzebuje, aby objąć wewnątrz elementy podrzędne, które są pływające (zamiast zwijania), przy założeniu, że wysokość nie jest zadeklarowana. Lubię to:
Lepszą techniką czyszczenia typu float jest clearfix, ponieważ nie wymaga ona zmiany właściwości overflow w sposób, którego nie potrzebujesz.
Generowanie kontekstu formatowania bloku
Warto zauważyć, że overflowutworzy również nowy kontekst formatowania bloku, który jest przydatny, jeśli chcemy wyrównać element blokowy do elementu pływającego. W poniższym przykładzie pokazujemy, jak wiele akapitów będzie domyślnie oddziaływać z pływającym obrazem, a następnie używamy overflow: hiddendo wyrównania tekstu w jego własnym polu:
Pochodzi to ze świetnego postu Nicole Sullivan, który zainspirował obiekt medialny.
Czy paski przewijania mogą być stylizowane za pomocą CSS?
Kiedyś można było stylizować paski przewijania w IE (v5.5?), Ale nic więcej. Możesz teraz zmienić ich styl w przeglądarkach WebKit. Jeśli potrzebujesz niestandardowych pasków przewijania w różnych przeglądarkach, spójrz na JavaScript.
Jeśli element musi mieć dołączone paski przewijania w celu uwzględnienia wartości przepełnienia, Firefox umieszcza je poza elementem, zachowując widoczną szerokość / wysokość zgodnie z deklaracją. IE umieszcza paski przewijania w środku, zachowując całkowitą szerokość / wysokość zgodnie z deklaracją.
Próbny
Prezentacje tego artykułu pochodzą z tej przykładowej strony.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Związane z
- Właściwość float
Więcej informacji
- Zrozumieć Humble Clearfix
- Przelew: sekretna korzyść
- Przepełnienie na MDN
- Przepełnienie na W3C
- Znalezienie / naprawienie niezamierzonego przepełnienia ciała