Układ CSS — przepełnienie
Właściwość CSS overflowkontroluje, co dzieje się z treścią, która jest zbyt duża, aby zmieścić się w obszarze.
Przepełnienie CSS
Właściwość overflowokreśla, czy przyciąć zawartość, czy dodać paski przewijania, gdy zawartość elementu jest zbyt duża, aby zmieścić się w określonym obszarze.
Właściwość overflowma następujące wartości:
visible- Domyślna. Przepełnienie nie jest przycięte. Treść renderuje się poza ramką elementuhidden- Przepełnienie jest obcięte, a reszta treści będzie niewidocznascroll- Przepełnienie jest obcinane i dodawany jest pasek przewijania, aby zobaczyć resztę treściauto- Podobny doscroll, ale dodaje paski przewijania tylko wtedy, gdy jest to konieczne
Uwaga: Właściwość overflowdziała tylko dla elementów blokowych o określonej wysokości.
Uwaga: W systemie OS X Lion (na Macu) paski przewijania są domyślnie ukryte i wyświetlane tylko wtedy, gdy są używane (nawet jeśli ustawiono „overflow:scroll”).
przelew: widoczny
Domyślnie przepełnienie to visible, co oznacza, że nie jest obcinane i renderuje się poza ramką elementu:
Przykład
div {
width: 200px;
height:
50px;
background-color: #eee;
overflow: visible;
}
przepełnienie: ukryte
Z hiddenwartością przepełnienie jest obcinane, a reszta treści jest ukryta:
Przykład
div {
overflow: hidden;
}
przepełnienie: przewijanie
Ustawienie wartości na scroll, przepełnienie jest obcinane i dodawany jest pasek przewijania do przewijania wewnątrz pola. Zauważ, że doda to pasek przewijania zarówno w poziomie, jak iw pionie (nawet jeśli go nie potrzebujesz):
Przykład
div {
overflow: scroll;
}
przepełnienie: auto
Wartość autojest podobna do scroll, ale dodaje paski przewijania tylko wtedy, gdy jest to konieczne:
Przykład
div {
overflow: auto;
}
przepełnienie-x i przepełnienie-y
Właściwości overflow-xi overflow-yokreślają, czy przepełnienie treści ma być zmieniane tylko w poziomie, w pionie (lub w obu):
overflow-xokreśla, co zrobić z lewą/prawą krawędzią treści.
overflow-yokreśla, co zrobić z górnymi/dolnymi krawędziami treści.
Przykład
div {
overflow-x: hidden; /* Hide horizontal scrollbar
*/
overflow-y: scroll; /* Add vertical scrollbar */
}
Wszystkie właściwości przepełnienia 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 |