Поиск…


Синтаксис

  • переполнение: видимое | скрытый | прокрутка | авто | начальная | наследовать;

параметры

Значение Overflow подробности
visible Показывает все переполняющее содержимое вне элемента
scroll Скрывает переполняющий контент и добавляет полосу прокрутки
hidden Скрывает переполненное содержимое, и полосы прокрутки исчезают, и страница фиксируется
auto То же, что и scroll если содержимое переполняется, но не добавляет полосу прокрутки, если содержимое подходит
inherit Наследует значение родительского элемента для этого свойства

замечания

Свойство overflow указывает, следует ли обрезать контент, отображать полосы прокрутки или растягивать контейнер для отображения содержимого, когда он переполняет свой контейнер уровня блока.

Когда элемент слишком мал, чтобы отображать его содержимое, что происходит? По умолчанию содержимое просто переполняется и отображается вне элемента. Это заставляет вашу работу выглядеть плохо. Вы хотите, чтобы ваша работа выглядела хорошо, поэтому вы устанавливаете свойство переполнения для обработки переполняющего содержимого желательным образом.

Значения для свойства 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;
}

Результат

Изображение, показывающее 100px на 100px div с полосами прокрутки

Содержимое, указанное выше, обрезается в поле размером 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;
}


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow