Rozložení CSS - Přetečení

Vlastnost CSS overflowřídí, co se stane s obsahem, který je příliš velký na to, aby se vešel do oblasti.

Tento text je opravdu dlouhý a výška jeho kontejneru je pouhých 100 pixelů. Proto je přidán posuvník, který čtenáři pomáhá posouvat obsah. Samotná bolest je láska Proto je na nejmenším přijít, koho naše běžná praxe snese, aby využil důsledků Bolest z bolesti v předsednictvu na olympijských hrách nebo z bolesti v předsednictvu na olympijských hrách, chce být mrzutý do důsledků, nebo trpí bolestí imunitního systému eu na pravdu, eros a spotřebitel, a pravidelná nenávist zzril. Neboť volný čas, kdy jsme osvobozeni od našich teenagerů, není na výběr Typy nemají vlastní jasnost

Přetečení CSS

Tato overflowvlastnost určuje, zda oříznout obsah nebo přidat posuvníky, když je obsah prvku příliš velký a nevejde se do určené oblasti.

Nemovitost overflowmá následující hodnoty:

visible- Výchozí. Přepad není oříznutý. Obsah se vykresluje mimo rámeček prvku
hidden - Přetečení je oříznuto a zbytek obsahu bude neviditelný
scroll - Přetečení je oříznuto a je přidán posuvník, abyste viděli zbytek obsahu
auto- Podobné jako scroll, ale přidává posuvníky pouze v případě potřeby

Poznámka: Tato overflowvlastnost funguje pouze pro prvky bloku se zadanou výškou.

Poznámka: V OS X Lion (na Macu) jsou posuvníky ve výchozím nastavení skryté a zobrazují se pouze při použití (i když je nastaveno „overflow:scroll“).

přepad: viditelný

Ve výchozím nastavení je přetečení visible, což znamená, že není oříznuté a vykresluje se mimo rámeček prvku:

Vlastnost overflow můžete použít, když chcete mít lepší kontrolu nad rozvržením. Vlastnost overflow určuje, co se stane, když obsah přeteče rámeček prvku.

Příklad

div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}

přepad: skrytý

S hiddenhodnotou je přetečení oříznuto a zbytek obsahu je skrytý:

Příklad

div {
overflow: hidden;
}

přetečení: rolovat

Nastavením hodnoty na scroll, přetečení se ořízne a přidá se posuvník pro posouvání uvnitř pole. Všimněte si, že to přidá posuvník vodorovně i svisle (i když jej nepotřebujete):

Vlastnost overflow můžete použít, když chcete mít lepší kontrolu nad rozvržením. Vlastnost overflow určuje, co se stane, když obsah přeteče rámeček prvku.

Příklad

div {
overflow: scroll;
}

přetečení: auto

Hodnota autoje podobná scroll, ale přidává posuvníky pouze v případě potřeby:

Vlastnost overflow můžete použít, když chcete mít lepší kontrolu nad rozvržením. Vlastnost overflow určuje, co se stane, když obsah přeteče rámeček prvku.

Příklad

div {
overflow: auto;
}

přetečení-x a přetečení-y

Vlastnosti overflow-xa overflow-yurčují, zda změnit přetečení obsahu pouze vodorovně nebo svisle (nebo obojí):

overflow-xurčuje, co se má dělat s levým/pravým okrajem obsahu.
overflow-yurčuje, co se má dělat s horním/spodním okrajem obsahu.

Vlastnost overflow můžete použít, když chcete mít lepší kontrolu nad rozvržením. Vlastnost overflow určuje, co se stane, když obsah přeteče rámeček prvku.

Příklad

div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}

Všechny vlastnosti přetečení CSS

Property	Description
overflow	Specifies what happens if content overflows an element's box
overflow-wrap	Specifies whether or not the browser can break lines with long words, if they overflow its container
overflow-x	Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y	Specifies what to do with the top/bottom edges of the content if it overflows the element's content area

❮ Předchozí Další ❯

CSS tutoriál

Pokročilé CSS

CSS responzivní

CSS mřížka

CSS SASS

Příklady CSS

CSS reference

Rozložení CSS - Přetečení

Přetečení CSS

přepad: viditelný

Příklad

přepad: skrytý

Příklad

přetečení: rolovat

Příklad

přetečení: auto

Příklad

přetečení-x a přetečení-y

Příklad

Otestujte se pomocí cvičení

Cvičení:

Všechny vlastnosti přetečení CSS