Vlastnost overflow

Vlastnost overflow určuje prohlížeči, jak zacházet s obsahem (text, obrázky, další bloky), který přetéká přes hranice bloku (přes jeho šířku nebo výšku). Prohlížeč může skrýt přetékající část, přidat posuvníky nebo nedělat nic (ponechat jak je - přetékající přes hranice).

Syntaxe

cssselektor {
  overflow: hidden | scroll | auto | visible;
}

Hodnoty

Výchozí hodnota: visible.

Příklad . Hodnota visible

V tomto příkladu se velmi dlouhé slo nevejde do kontejneru a přeteče přes jeho hranice. Ke zkrácení nedochází:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: visible;
  border: 1px solid red;
  width: 200px;
}

Результат:

Příklad . Hodnota visible

Nyní je omezena nejen šířka, ale i výška (text přeteče přes blok i výškově):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  height: 40px;
  overflow: visible;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

Příklad . Hodnota hidden

Nyní se vše, co přeteklo přes hranice kontejneru, jednoduše ořízne (a to i výškově). Všimněte si, že k ořezávání podle výšky dochází pouze tehdy, když je explicitně zadána. V opačném případě text rozšiřuje kontejner výškově - a k žádnému ořezávání nedojde:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: hidden;
  width: 200px;
  height: 40px;
  border: 1px solid red;
}

Результат:

Příklad . Hodnota scroll

Při hodnotě scroll budou posuvníky vždy, i když nic nepřetéká (v tomto případě budou neaktivní). Nyní text nepřetéká ani šířkově, ani výškově, ale posuvníky stejně jsou (neaktivní):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: scroll;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Příklad . Hodnota auto

Při hodnotě auto se posuvníky přidají pouze, pokud obsah přetéká přes kontejner. Nyní tam nejsou, protože vše se vejde:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: auto;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Příklad . Hodnota auto

A nyní omezíme šířku - objeví se vodorovný posuvník:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  height: 100px;
  border: 1px solid red;
}

Результат:

Viz také