Ostatnio edytowany:

overflow-x

Autor: Virtual Patriot

Opis właściwości overflow-x

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

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

przeznaczenie
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości overflow-x

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

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

visible

Opis

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

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

Przykład

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 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:350px;
        white-space:nowrap;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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-x możemy sprawić, że treść niemieszcząca się w obszarze wyznaczonym przez zewnętrzną krawędź prawego wewnętrznego marginesu interesującego nas elementu HTML zostanie ukryta.

Przykład

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 wewnętrznego marginesu przykładowego elementu "div" została ukryta, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow-x" 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-x:hidden;
        width:350px;
        white-space:nowrap;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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-x możemy sprawić, że do obszaru interesującego nas elementu HTML zostanie dodany (nawet gdy nie jest to konieczne) poziomy suwak służący do przewijania treści.

Przykład

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ł dodany poziomy suwak służący do przewijania treści, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow-x" 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-x:scroll;
        width:350px;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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-x możemy sprawić, że do obszaru interesującego nas elementu HTML zostanie dodany (lecz tylko wtedy, gdy jest to konieczne) poziomy suwak służący do przewijania treści.

Przykład

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 wewnętrznego marginesu przykładowego elementu "div", do obszaru przykładowego elementu "div" został dodany poziomy suwak służący do przewijania treści, ponieważ do wspomnianego elementu "div" została dodana właściwość "overflow-x" 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-x:auto;
        width:350px;
        white-space:nowrap;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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>