Свойство overflow

Определяет, что делать с содержимым элемента, если оно не помещается в установленные размеры. Сокращенная запись, которая объединяет два свойства overflow-x и overflow-y

overflow: auto;
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Значения

overflow: visible;

Содержимое элемента, которое не помещается в его размеры, не обрезается. Используя один параметр вы автоматически задаете значение для X и Y осей.

<style>
.example-1 {
    width: 150px;
    height: 150px;
    overflow: visible;
    background: #55bb61;
}
</style>
<div class="example-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum
    at magnam officia iusto amet in iste deserunt dolores
    accusantium fugit quam culpa fugiat!</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum at magnam officia iusto amet in iste deserunt dolores accusantium fugit quam culpa fugiat!

overflow: hidden;

Содержимое элемента, которое не помещается в его размеры, обрезается. Используя один параметр вы автоматически задаете значение для X и Y осей.

<style>
.example-2 {
    width: 150px;
    height: 150px;
    overflow: hidden;
    background: #55bb61;
}
</style>
<div class="example-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum
    at magnam officia iusto amet in iste deserunt dolores
    accusantium fugit quam culpa fugiat!</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum at magnam officia iusto amet in iste deserunt dolores accusantium fugit quam culpa fugiat!

overflow: scroll;

При необходимости содержимое элемента, которое не помещается в его размеры, обрезается. Полосы прокрутки всегда будут видны. Используя один параметр вы автоматически задаете значение для X и Y осей.

<style>
.example-3 {
    width: 150px;
    height: 150px;
    overflow: scroll;
    background: #55bb61;
}
</style>
<div class="example-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum
    at magnam officia iusto amet in iste deserunt dolores
    accusantium fugit quam culpa fugiat!</p>
</div>
<br>
<div class="example-3">
    <p>Lorem ipsum dolor sit amet</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum at magnam officia iusto amet in iste deserunt dolores accusantium fugit quam culpa fugiat!


Lorem ipsum dolor sit amet

overflow: auto;

Содержимое элемента, которое не помещается в его размеры, обрезается и появляются полосы прокрутки. Используя один параметр вы автоматически задаете значение для X и Y осей.

<style>
.example-4 {
    width: 150px;
    height: 150px;
    overflow: auto;
    background: #55bb61;
}
</style>
<div class="example-4">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum
    at magnam officia iusto amet in iste deserunt dolores
    accusantium fugit quam culpa fugiat!</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum at magnam officia iusto amet in iste deserunt dolores accusantium fugit quam culpa fugiat!

overflow: hidden auto;

Используя два параметра вы можете задавать разные значения для X и Y осей.

<style>
.example-5 {
    width: 150px;
    height: 150px;
    overflow: hidden auto;
    background: #55bb61;
}
</style>
<div class="example-5">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum
    at magnam officia iusto amet in iste deserunt dolores
    accusantium fugit quam culpa fugiat!</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum at magnam officia iusto amet in iste deserunt dolores accusantium fugit quam culpa fugiat!

Читайте также

Обсуждение (1)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии


Madi
Как раз то, что я искал