Zobaczmy klasyczny przykład elementu, który jest bardzo mały ze względu na swoją zawartość i generuje przepełnienie, ponieważ wszystko jest łatwiejsze do zobaczenia na przykładach, najpierw zobaczmy jeden, zanim przejdziemy do właściwości, które pomagają nam kontrolować przepełnienie.
PrzykładIstnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.
Poprzedni kod generuje w przeglądarce następujący wynik:
przelew-x / przelew-y: Określają zachowanie przepełnienia poziomego lub pionowego.
Przelewowy: Jest to skrót do użycia poprzedniej właściwości i kolejność jej działania to przepełnienie, przepełnienie x, przepełnienie y.
Właściwości, których można używać z elementem przelewowy są następujące:samochód: Ta wartość deleguje do przeglądarki odpowiedzialność za decydowanie o tym, co zrobić, zwykle dzieje się tak, że pasek przewijania jest wyświetlany, gdy element zaczyna się przepełniać.
ukryty: Treść jest pokazywana do tej części, która się nie przelewa, ukrywając resztę treści, nie ma mechanizmów, aby powiedzieć użytkownikowi, co zrobić, aby zobaczyć resztę treści.
brak zawartości: Przepełniona zawartość jest usuwana, jeśli nie można jej zmieścić w kontenerze. Ta wartość nie jest obsługiwana przez żadną z najpopularniejszych przeglądarek
brak wyświetlacza: Treść jest ukryta, jeśli nie można jej w pełni wyświetlić. Ta wartość nie jest obsługiwana przez żadną z najpopularniejszych przeglądarek.
zwój: Przeglądarka generuje pasek przewijania, dzięki czemu użytkownik zawsze widzi przepełnioną zawartość wewnątrz kontenera. Pasek będzie zależał od przeglądarki i systemu, aby zdefiniować sposób jego wyświetlania. Pasek przewijania będzie zawsze widoczny, nawet jeśli element się nie przepełni.
widoczny: To jest wartość domyślna. Treść jest zawsze wyświetlana, nawet jeśli się przepełni.
Teraz, gdy mamy narzędzia do atakowania przepełnienia, zobaczmy w praktyce, jak możemy to zastosować, nic lepszego niż mały kod, aby to zademonstrować:PrzykładIstnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.
Istnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.
Wykorzystaliśmy dwa elementy, aby zademonstrować, jak przelewowy, w pierwszym umieszczamy nieruchomość ukryty gdzie wiemy, że tylko zawartość zostanie pokazana do miejsca, w którym zaczyna się przepełnienie, potem reszta jest ukryta i za sekundę używamy scrolla, z którym pokaże się pasek przewijania bez względu na to, czy element się przepełni, zobaczmy wynik:
