Az overflow tulajdonság

Ez a tulajdonság határozza meg, hogy egy blokk elem hogyan viselkedjen, amikor az elem dobozát kinövi a tartalma.

Lehetséges értékei:

inherit: a tulajdonság értékét az elem az ősétől örökli
visible: ez az alapértelmezett értéke a tulajdonságnak. Az elem tartalmát nem vágja le a doboz szélén, hanem a dobozon kívül is megjeleníti, ha szükséges.
hidden: az elem tartalma csak a dobozon belül látszik. A tartalomnak a dobozból kilógó részét a böngésző nem jeleníti meg (levágja). Ilyen érték mellett a dobozból kilógó részéhez az elem tartalmának nem lehet hozzáférni. Azt, hogy mekkora a levágásra szolgáló régió, a clip tulajdonság adja meg.
scroll: ez az érték azt eredményezi, hogy a tartalom a doboz széleinél elvágásra kerül, de ha a böngésző képes görgetésre, akkor a dobozban az elem tartalmát lehet görgetni. A gördítősávok megjelennek függetlenül attól, hogy arra szükség van-e.
auto: ennek az értéknek a hatására a gördítősávok csak akkor jelennek meg, ha szükség van rájuk.

Minden blokk szintű elemre használható. Ezenkívül használható még az úgynevezett helyettesített elemekre is.

Az alábbi példa megmutatja a tulajdonság használatát egy idézeten (BLOCKQUOTE), amelynek méretét egy DIV elem korlátozza:

<DIV>
<BLOCKQUOTE>
<P>I didn't like the play, but then I say it under adverse conditions - the curtain was up.
<DIV class="attributed-to">- Groucho Marx</DIV>
</BLOCKQUOTE>
</DIV>

A hozzá tartozó stíluslap:

DIV { width: 100px; height: 100px; border: thin solid red;}
BLOCKQUOTE {
  width: 125px; height: 100px;
  margin-top: 50px; margin-left: 50px;
  border: thin dashed black
}
DIV.attributed-to { text-align: right}

Az alapértelmezett visible érték esetén az overflow tulajdonság a kilógó szélek levágása nélkül jeleníti meg a szöveget, amit a keretek is jeleznek:

Ha a tulajdonság értékét hidden-re állítjuk, akkor az idézetnek a kilógó részei nem látszanak. A scroll érték esetén megjelennek a gördítősávok, és így a nem látszó részek is elérhetővé válhatnak: