Autor publikacji
Virtual Patriot - Administrator

overflow

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości overflow

Za pomocą właściwości overflow możemy określić co ma stać się z treścią niemieszczącą się w obszarze wyznaczonym przez zewnętrzną krawędź prawego lub dolnego wewnętrznego marginesu interesującego nas elementu HTML.

Informacje dodatkowe

brak

Informacje techniczne o właściwości overflow

przeznaczenie

element HTML tworzący blok treści

pozycja

dowolna

dziedziczenie

nie

wartość initial

visible (lub auto gdy wartością właściwości overflow-x (lub overflow-y) elementu HTML jest wartość różna od wartości visible)

wyjątki initial

html

animowanie

tak (animacja schodkowa)

Interpretacja właściwości overflow

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości overflow

visible

Wyjaśnienie

Wartość visible jest domyślną wartością właściwości overflow.

Domyślnie treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź prawego lub dolnego wewnętrznego marginesu elementu HTML pozostaje widoczna.

Przykład

  overflow:visible;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź prawego lub dolnego wewnętrznego marginesu przykładowego elementu "div" pozostała widoczna.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        width:250px;
        height:100px;
        white-space:pre;
        border:15px solid orange;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

<div>ten
tekst
wyświetlony w oknie przeglądarki internetowej
został
umieszczony
w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>

  </body>
</html>

hidden

Wyjaśnienie

Za pomocą wartości hidden właściwości overflow możemy sprawić, że treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź prawego lub dolnego wewnętrznego marginesu interesującego nas elementu HTML zostanie ukryta.

Przykład

  overflow:hidden;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź prawego lub dolnego wewnętrznego marginesu przykładowego elementu "div" została ukryta, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow" wraz z wartością "hidden".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        overflow:hidden;
        width:250px;
        height:100px;
        white-space:pre;
        border:15px solid orange;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

<div>ten
tekst
wyświetlony w oknie przeglądarki internetowej
został
umieszczony
w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>

  </body>
</html>

scroll

Wyjaśnienie

Za pomocą wartości scroll właściwości overflow możemy sprawić, że do obszaru interesującego nas elementu HTML zostaną dodane (nawet gdy nie jest to konieczne) suwaki służące do przewijania treści.

Przykład

  overflow:scroll;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Do obszaru przykładowego elementu "div" zostały dodane suwaki służące do przewijania treści, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow" wraz z wartością "scroll".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        overflow:scroll;
        width:250px;
        border:15px solid orange;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

auto

Wyjaśnienie

Za pomocą wartości auto właściwości overflow możemy sprawić, że do obszaru interesującego nas elementu HTML zostaną dodane (lecz tylko wtedy, gdy jest to konieczne) odpowiednie suwaki służące do przewijania treści.

Przykład

  overflow:auto;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Ze względu na to, iż treść przykładowego elementu "div" nie mieści się w obszarze wyznaczonym przez zewnętrzną krawędź prawego lub dolnego wewnętrznego marginesu przykładowego elementu "div", do obszaru przykładowego elementu "div" zostały dodane odpowiednie suwaki służące do przewijania treści, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow" wraz z wartością "auto".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        overflow:auto;
        width:250px;
        height:100px;
        white-space:pre;
        border:15px solid orange;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

<div>ten
tekst
wyświetlony w oknie przeglądarki internetowej
został
umieszczony
w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>

  </body>
</html>