CSS
перелив
Поиск…
Синтаксис
- переполнение: видимое | скрытый | прокрутка | авто | начальная | наследовать;
параметры
Значение Overflow | подробности |
|---|---|
visible | Показывает все переполняющее содержимое вне элемента |
scroll | Скрывает переполняющий контент и добавляет полосу прокрутки |
hidden | Скрывает переполненное содержимое, и полосы прокрутки исчезают, и страница фиксируется |
auto | То же, что и scroll если содержимое переполняется, но не добавляет полосу прокрутки, если содержимое подходит |
inherit | Наследует значение родительского элемента для этого свойства |
замечания
Когда элемент слишком мал, чтобы отображать его содержимое, что происходит? По умолчанию содержимое просто переполняется и отображается вне элемента. Это заставляет вашу работу выглядеть плохо. Вы хотите, чтобы ваша работа выглядела хорошо, поэтому вы устанавливаете свойство переполнения для обработки переполняющего содержимого желательным образом.
Значения для свойства overflow идентичны значениям свойств overflow-x и overflow-y , кроме того, что они применяются вдоль каждой оси
Свойство overflow-wrap также известно как свойство word-wrap .
Важное примечание. Использование свойства переполнения со значением, отличным от видимого, создаст новый контекст форматирования блока.
переполнение: прокрутка
HTML
<div>
This div is too small to display its contents to display the effects of the overflow property.
</div>
CSS
div {
width:100px;
height:100px;
overflow:scroll;
}
Результат
Содержимое, указанное выше, обрезается в поле размером 100 пикселей на 100 пикселей, с возможностью прокрутки для просмотра переполненного содержимого.
Большинство настольных браузеров будут отображать как горизонтальные, так и вертикальные полосы прокрутки, независимо от того, обрезано или нет какое-либо содержимое. Это позволяет избежать проблем с появлением и исчезновением полос прокрутки в динамической среде. Принтеры могут печатать переполненный контент.
Переполнение-обертка
overflow-wrap сообщает браузеру, что он может сломать строку текста внутри целевого элемента на несколько строк в другом небьющемся месте. Помогает предотвратить длинную строку текста, вызывающую проблемы макета из-за переполнения контейнера.
CSS
div {
width:100px;
outline: 1px dashed #bbb;
}
#div1 {
overflow-wrap:normal;
}
#div2 {
overflow-wrap:break-word;
}
HTML
<div id="div1">
<strong>#div1</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> is too long so it will overflow past the edge of the line-break
</div>
<div id="div2">
<strong>#div2</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> will be split at the line break and continue on the next line.
</div>
overflow-wrap - Значение | подробности |
|---|---|
normal | Позволяет переполнение слова, если оно длиннее строки |
break-word | Разделит слово на несколько строк, если необходимо |
inherit | Наследует значение родительского элемента для этого свойства |
переполнение: видимое
HTML
<div>
Even if this div is too small to display its contents, the content is not clipped.
</div>
CSS
div {
width:50px;
height:50px;
overflow:visible;
}
Результат
Содержимое не обрезается и будет отображаться вне поля содержимого, если оно превышает размер его контейнера.
Контекст форматирования блоков, созданный с помощью переполнения
Использование свойства overflow со значением, отличным от visible , создаст новый контекст форматирования блока . Это полезно для выравнивания элемента блока рядом с плавающим элементом.
CSS
img {
float:left;
margin-right: 10px;
}
div {
overflow:hidden; /* creates block formatting context */
}
HTML
<img src="http://placehold.it/100x100">
<div>
<p>Lorem ipsum dolor sit amet, cum no paulo mollis pertinacia.</p>
<p>Ad case omnis nam, mutat deseruisse persequeris eos ad, in tollit debitis sea.</p>
</div>
Результат
В этом примере показано, как абзацы внутри div с набором свойств overflow будут взаимодействовать с плавающим изображением.
переполнение-x и переполнение-y
Эти два свойства работают так же, как свойство overflow и принимают одинаковые значения. Параметр overflow-x работает только на оси x или слева направо. overflow-y работает на оси y или сверху вниз.
HTML
<div id="div-x">
If this div is too small to display its contents,
the content to the left and right will be clipped.
</div>
<div id="div-y">
If this div is too small to display its contents,
the content to the top and bottom will be clipped.
</div>
CSS
div {
width: 200px;
height: 200px;
}
#div-x {
overflow-x: hidden;
}
#div-y {
overflow-y: hidden;
}