Свойство 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.

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

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

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