Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВА OVERFLOW, OVERFLOW-X, OVERFLOW-Y

Свойства overflow, overflow-x и overflow-y позволяют настраивать то, как должно отображаться содержимое блока, которое выходит за его пределы. Свойство overflow-x отвечает за настройку отображения содержимого по оси x, свойство overflow-y — по оси y, своство overflow — по обеим осям.

Поддержка браузеров

Синтаксис

overflow: visible|hidden|scroll|auto|initial|inherit

Значения свойства

Значение	Описание
visible	Укаывает, что содержимое элемента, которое выходит за пределы блока будет отображается.
hidden	Укаывает, что содержимое элемента, которое выходит за пределы блока будет спрятано.
scroll	Указывает, что у блока всегда будут полосы прокрутки.
auto	Укаывает, что у блока будут появляться полосы прокрутки, только если содержимое выходит за пределы блока.
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

Песочница

<div class="block block-1">
<div class="inner-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a nunc nec purus rutrum hendrerit at a nibh. Curabitur rutrum tempor orci, sed varius leo malesuada nec. Nunc leo nulla, efficitur non ornare a, congue nec sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec in est imperdiet nunc porta ultricies quis quis orci. Donec vehicula ex eu consequat mollis. Suspendisse aliquet a nisl a volutpat. Sed blandit, velit lacinia laoreet sodales, libero urna aliquam tortor, eu dapibus turpis mauris non nisi. Quisque cursus lorem vitae massa laoreet blandit. Pellentesque in elementum justo, ac porta velit. Vivamus augue sem, tempor eu placerat vel, scelerisque ac magna.
</div>
</div>

<div class="block block-2">
<div class="inner-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a nunc nec purus rutrum hendrerit at a nibh. Curabitur rutrum tempor orci, sed varius leo malesuada nec. Nunc leo nulla, efficitur non ornare a, congue nec sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec in est imperdiet nunc porta ultricies quis quis orci. Donec vehicula ex eu consequat mollis. Suspendisse aliquet a nisl a volutpat. Sed blandit, velit lacinia laoreet sodales, libero urna aliquam tortor, eu dapibus turpis mauris non nisi. Quisque cursus lorem vitae massa laoreet blandit. Pellentesque in elementum justo, ac porta velit. Vivamus augue sem, tempor eu placerat vel, scelerisque ac magna.
</div>
</div>

<div class="block block-3">
<div class="inner-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a nunc nec purus rutrum hendrerit at a nibh. Curabitur rutrum tempor orci, sed varius leo malesuada nec. Nunc leo nulla, efficitur non ornare a, congue nec sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec in est imperdiet nunc porta ultricies quis quis orci. Donec vehicula ex eu consequat mollis. Suspendisse aliquet a nisl a volutpat. Sed blandit, velit lacinia laoreet sodales, libero urna aliquam tortor, eu dapibus turpis mauris non nisi. Quisque cursus lorem vitae massa laoreet blandit. Pellentesque in elementum justo, ac porta velit. Vivamus augue sem, tempor eu placerat vel, scelerisque ac magna.
</div>
</div>

HTML

.block {
    height: 200px;
    width: 200px;
    background: #f1f1f1;
    margin: 0 20px 20px 0;
    display: inline-block;
}

.inner-block {
    width: 220px;
    background: blue;
    padding: 15px;
    color: #fff;
}
                   
.block-1 {
    overflow: scroll;
}  
                 
.block-2 {
    overflow: hidden;
}
                 
.block-3 {
    overflow-x: hidden;
    overflow-y: auto;
}

CSS

← Перейти к списку свойств