Sifat overflow

Sifat overflow memberitahu pelayar, bagaimana untuk mengendalikan kandungan (teks, gambar, blok lain) yang melebar keluar dari sempadan blok (melebihi lebarnya atau tingginya). Pelayar boleh menyembunyikan bahagian yang melebar, menambah bar tatal atau tidak melakukan apa-apa (membiarkan seperti keadaan asal - melebar keluar dari sempadan).

Sintaks

selector {
	overflow: hidden | scroll | auto | visible;
}

Nilai

Nilai	Keterangan
`hidden`	Menyembunyikan kandungan yang melebar keluar dari sempadan blok.
`scroll`	Menambah bar tatal, dan sentiasa wujud, walaupun tiada yang melebar (dalam kes ini ia tidak akan aktif).
`auto`	Menambah bar tatal jika diperlukan: jika kandungan tidak muat - ia akan muncul, jika semua muat - ia tidak akan wujud.
`visible`	Tidak menyembunyikan kandungan yang melebar keluar dari sempadan blok.

Nilai lalai: visible.

Contoh . Nilai visible

Dalam contoh ini, perkataan yang sangat panjang tidak akan muat dalam bekas dan akan melebar keluar dari sempadannya. Pemotongan tidak berlaku:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: visible;
	border: 1px solid red;
	width: 200px;
}

Contoh . Nilai visible

Sekarang bukan sahaja lebar yang dihadkan, malah tinggi juga (teks akan melebar keluar dari blok dari segi tinggi juga):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	height: 40px;
	overflow: visible;
	border: 1px solid red;
	margin-bottom: 20px;
}

Contoh . Nilai hidden

Sekarang semua yang melebar keluar dari sempadan bekas akan dipotong begitu sahaja (dari segi tinggi juga). Perhatikan bahawa pemotongan dari segi tinggi hanya berlaku apabila ia ditetapkan secara jelas. Jika tidak, teks akan mengembangkan bekas dari segi tinggi - dan tiada pemotongan akan berlaku:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: hidden;
	width: 200px;
	height: 40px;
	border: 1px solid red;
}

Contoh . Nilai scroll

Dengan nilai scroll, bar tatal akan sentiasa wujud, walaupun tiada yang melebar (dalam kes ini ia tidak akan aktif). Sekarang teks tidak melebar sama ada dari segi lebar atau tinggi, tetapi bar tatal masih wujud (tidak aktif):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: scroll;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Contoh . Nilai auto

Dengan nilai auto, bar tatal hanya ditambah jika kandungan melebar keluar dari bekas. Sekarang ia tiada, kerana semuanya muat:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow: auto;
	width: 400px;
	height: 100px;
	border: 1px solid red;
}

Contoh . Nilai auto

Sekarang mari kita hadkan lebar - bar tatal mendatar akan muncul:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	height: 100px;
	border: 1px solid red;
}

Lihat juga

sifat word-break,
yang memindahkan huruf perkataan panjang ke baris baru
sifat overflow-wrap,
yang memindahkan huruf perkataan panjang ke baris baru
sifat overflow-x,
yang memotong bahagian yang melebar secara mendatar
sifat overflow-y,
yang memotong bahagian yang melebar secara menegak