CSS
Przelewowy

Składnia

• przepełnienie: widoczne | ukryty | przewiń | auto | inicjał | dziedziczyć;

Parametry

Uwagi

przepełnienie: przewiń

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;
}

Wynik

Powyższa treść jest przycinana w polu o wymiarach 100 na 100 pikseli, z możliwością przewijania w celu wyświetlenia przepełnionej zawartości.

Większość przeglądarek stacjonarnych wyświetla zarówno poziome, jak i pionowe paski przewijania, niezależnie od tego, czy zawartość jest przycinana, czy nie. Pozwala to uniknąć problemów z pojawianiem się i znikaniem pasków przewijania w środowisku dynamicznym. Drukarki mogą drukować przepełnione treści.

przepełnienie

overflow-wrap informuje przeglądarkę, że może rozbić wiersz tekstu w elemencie docelowym na wiele linii w innym miejscu nie do złamania. Pomocny w zapobieganiu długim ciągom tekstu powodującym problemy z układem z powodu przepełnienia kontenera.

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>

przelew: widoczny

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;
}

Wynik

Treść nie jest przycinana i będzie renderowana poza polem zawartości, jeśli przekroczy rozmiar pojemnika.

Blokuj formatowanie kontekstu utworzonego z przepełnieniem

Użycie właściwości overflow o wartości innej niż visible spowoduje utworzenie nowego kontekstu formatowania bloku . Jest to przydatne do wyrównania elementu bloku obok elementu pływającego.

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>

Wynik

Ten przykład pokazuje, w jaki sposób akapity w div z zestawem właściwości overflow będą oddziaływać z pływającym obrazem.

overflow-x i overflow-y

Te dwie właściwości działają w podobny sposób jak właściwość overflow i przyjmują te same wartości. Parametr overflow-x działa tylko na osi x lub od lewej do prawej. overflow-y działa na osi y lub od góry do dołu.

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;
}