Ostatnio edytowany:

overflow

Autor: Virtual Patriot

Opis 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.

Dodatkowe techniczne informacje o właściwości overflow

przeznaczenie

element HTML tworzący blok treści

dziedziczenie

nie

wartość initial

visible

wyjątki initial

html

animowanie

nie (animacja nieciągła)

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

Opis

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;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </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

Opis

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;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </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

Opis

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;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </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

Opis

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;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </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>