Własność CSS overflow-block

Własność CSS overflow-block to logiczna własność określająca, co dzieje się z treścią, która nie mieści się w zawierającym ją elemencie w orientacji blokowej.

W zależności od kierunku i orientacji tekstu własność ta może odpowiadać fizycznej własności overflow-x lub overflow-y.

Wartości i składnia

Własność CSS overflow-block przyjmuje jedno słowo kluczowe z następującego zestawu: visible, hidden, clip, scroll, auto.

Poniżej znajduje się opis tych słów kluczowych.

• auto: jeśli treść nie mieści się w elemencie, to przeglądarka, zależnie od potrzeby, wyświetla pasek przewijania pozwalający obejrzeć całą treść poprzez jej przewijanie. W przypadku tej wartości, inaczej niż w przypadku wartości scroll, pasek przewijania jest wyświetlany tylko wtedy, gdy jest potrzebny. Zobacz przykład użycia wartości auto w opisie własności overflow.
• clip: powoduje ucięcie nadmiarowej treści w miejscu krawędzi odcięcia nadmiaru (ang. overflow clip edge), którą definiuje własność overflow-clip-margin, jeśli jest zdefiniowana. Element z takim ustawieniem nie jest tzw. kontenerem przewijanym i nie pozwala na przewijanie treści w żaden sposób, nawet za pomocą skryptów. Zobacz przykład użycia wartości clip w opisie własności overflow.
• hidden: treść nadmiarowa zostaje ukryta. Nie pojawia się żaden pasek przewijania i użytkownik strony nie ma dostępu do schowanej treści. Można natomiast odnieść się do niej z poziomu skryptów, w związku z czym element z takim ustawieniem jest kontenerem przewijanym. Zobacz przykład użycia wartości hidden w opisie własności overflow.
• scroll: oba paski przewijania są widoczne zawsze, nawet kiedy treść w całości mieści się w elemencie. Element z takim ustawieniem jest kontenerem przewijanym. Zobacz przykład użycia wartości overflow w opisie własności overflow.
• visible: to jest ustawienie domyślne własności overflow-block. Powoduje, że cała treść jest widoczna, nawet jeśli wychodzi poza element, który w takim przypadku nie jest kontenerem przewijanym. Zobacz przykład użycia wartości visible w opisie własności overflow.

Przykład

W tym przykładzie element div zawiera więcej treści niż jest w stanie pomieścić, ale ma zdefiniowaną własność overflow o wartości auto, dzięki czemu wyświetla pasek przewijania pozwalający ją obejrzeć.

<style>
div {
  width: 300px;
  height: 150px;
  border: 1px solid red;
  overflow-block: auto;
}
</style>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>

Efekt:

Zastosowanie

Własność CSS overflow-block ma zastosowanie do kontenerów blokowych, flex i siatkowych (ang. grid).

Podsumowanie