CSS Overflow Properties Tutorial

Html copy reset ☀ Lights Netbax Online Editor Try it Yourself Run

.overflow2 {
  background-color: #c00;
  width: 400px;
  height: 140px;
  overflow: hidden;
color:#fff;
}

.overflow3 {
  background-color: #ff3800;
  width: 400px;
  height: 140px;
  overflow: auto;
color:#fff;
}

.overflow4 {
  background-color: #008000;
  width: 400px;
  height: 140px;
  overflow: clip;
color:#fff;
}

.overflow5 {
  background-color: #ff7e00;
  width: 400px;
  height: 140px;
  overflow: visible;
color:#fff;
}
</style>

<h2>The Overflow Properties</h2>

<h2>scroll</h2>
<div class="overflow1">Contrary to popular belief, Lorem Ipsum. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo!  Copo furadis é disculpa de bebadis, arcu quam euismod magna.  Mé faiz elementum girarzis, nisi eros vermeio.  Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio.  Atirei o pau no gatis, per gatis num morreus.  Diuretics paradis num copo é motivis de denguis.  Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis.</div>

<h2>hidden</h2>
<div class="overflow2">Contrary to popular belief, Lorem Ipsum. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo!  Copo furadis é disculpa de bebadis, arcu quam euismod magna.  Mé faiz elementum girarzis, nisi eros vermeio.  Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio.  Atirei o pau no gatis, per gatis num morreus.  Diuretics paradis num copo é motivis de denguis.  Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis.</div>

<h2>auto</h2>
<div class="overflow3">Contrary to popular belief, Lorem Ipsum. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo!  Copo furadis é disculpa de bebadis, arcu quam euismod magna.  Mé faiz elementum girarzis, nisi eros vermeio.  Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio.  Atirei o pau no gatis, per gatis num morreus.  Diuretics paradis num copo é motivis de denguis.  Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis.</div>

<h2>clip</h2>
<div class="overflow4">Contrary to popular belief, Lorem Ipsum. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo!  Copo furadis é disculpa de bebadis, arcu quam euismod magna.  Mé faiz elementum girarzis, nisi eros vermeio.  Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. </div>

<h2>visible</h2>
<div class="overflow5">Contrary to popular belief, Lorem Ipsum. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo!  Copo furadis é disculpa de bebadis, arcu quam euismod magna.  Mé faiz elementum girarzis, nisi eros vermeio.  Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. </div>