Свойство overflow-x
Определяет, что делать с содержимым элемента, если оно не помещается в установленные размеры по оси X
overflow-x: hidden;Пошаговый план! Как быстро научиться создавать сайты!
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все
Значения
overflow-x: visible;
Содержимое элемента, которое не помещается в его размеры по оси X, не обрезается.
<style>
.example-1 {
width: 150px;
overflow-x: visible;
white-space: nowrap;
background: #55bb61;
}
</style>
<div class="example-1">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
</div>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
overflow-x: hidden;
Содержимое элемента, которое не помещается в его размеры по оси X, обрезается.
<style>
.example-2 {
width: 150px;
overflow-x: hidden;
white-space: nowrap;
background: #55bb61;
}
</style>
<div class="example-2">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
</div>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
overflow-x: scroll;
При необходимости содержимое элемента, которое не помещается в его размеры по оси X, обрезается. Полоса горизонтальной прокрутки всегда будет видна.
<style>
.example-3 {
width: 150px;
overflow-x: scroll;
white-space: nowrap;
background: #55bb61;
}
</style>
<div class="example-3">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
</div>
<br>
<div class="example-3">
Lorem ipsum.
</div>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
Lorem ipsum.
overflow-x: auto;
Содержимое элемента, которое не помещается в его размеры по оси X, обрезается и появляется полоса горизонтальной прокрутки.
<style>
.example-4 {
width: 150px;
overflow-x: auto;
white-space: nowrap;
background: #55bb61;
}
</style>
<div class="example-4">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
</div>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.