Свойство overflow
Определяет, что делать с содержимым элемента, если оно не помещается в установленные размеры. Сокращенная запись, которая объединяет два свойства overflow-x и overflow-y
overflow: auto;
Значения
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!