Overflow

Kawal kelakuan limpahan kandungan

Sintaks

layout="overflow:[value]"

Nilai

Nilai	CSS Output	Huraian
auto	overflow: auto	Bar skrol bila perlu
hidden	overflow: hidden	Sembunyikan limpahan
visible	overflow: visible	Tunjukkan limpahan
scroll	overflow: scroll	Sentiasa tunjuk bar skrol
clip	overflow: clip	Potong limpahan

Contoh

<div layout="overflow:hidden">Clipped content</div>
<div layout="overflow:auto">Scrollable</div>

Pratonton

Limpahan Tersembunyi

layout="overflow:hidden" - Kandungan dipotong di tepi bekas

This is a long text that will be clipped because overflow is hidden.

Lihat Kod

<div layout="overflow:hidden" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
  <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will be clipped because overflow is hidden.</p>
</div>

Limpahan Auto

layout="overflow:auto" - Bar skrol muncul apabila kandungan melimpah

This is a long text that will show a scrollbar because overflow is auto.

Lihat Kod

<div layout="overflow:auto" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
  <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will show a scrollbar because overflow is auto.</p>
</div>