Properti overflow

Properti overflow memberi tahu browser, bagaimana menangani konten (teks, gambar, blok lain) yang keluar dari batas blok (melebihi lebar atau tingginya). Browser dapat menyembunyikan bagian yang keluar, menambahkan scroll bar atau tidak melakukan apa-apa (membiarkannya sebagaimana adanya - keluar dari batas).

Sintaksis

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

Nilai

Nilai	Keterangan
`hidden`	Menyembunyikan konten yang keluar dari batas blok.
`scroll`	Menambahkan scroll bar, dan selalu ditampilkan, bahkan jika tidak ada yang keluar (dalam hal ini scroll bar akan tidak aktif).
`auto`	Menambahkan scroll bar jika diperlukan: jika konten tidak muat - scroll bar akan muncul, jika semua muat - scroll bar tidak akan ditampilkan.
`visible`	Tidak menyembunyikan konten yang keluar dari batas blok.

Nilai default: visible.

Contoh . Nilai visible

Dalam contoh ini, kata yang sangat panjang tidak akan muat di dalam wadah dan akan keluar dari batasnya. Pemotongan tidak terjadi:

<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 tidak hanya lebarnya yang dibatasi, tetapi tingginya juga (teks akan keluar dari blok secara vertikal 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 keluar dari batas wadah akan dipotong (baik secara vertikal maupun horizontal). Perhatikan bahwa pemotongan secara vertikal hanya terjadi ketika tinggi ditentukan secara eksplisit. Jika tidak, teks akan memperluas wadah secara vertikal - dan tidak akan ada pemotongan:

<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, scroll bar akan selalu ditampilkan, bahkan jika tidak ada yang keluar (dalam hal ini scroll bar akan tidak aktif). Sekarang teks tidak keluar baik secara horizontal maupun vertikal, tetapi scroll bar tetap ada (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, scroll bar hanya ditambahkan jika konten keluar dari wadah. Sekarang scroll bar tidak ada, karena 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 batasi lebarnya - scroll bar horizontal 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

properti word-break,
yang memindahkan huruf dari kata panjang ke baris baru
properti overflow-wrap,
yang memindahkan huruf dari kata panjang ke baris baru
properti overflow-x,
yang memotong bagian yang keluar secara horizontal
properti overflow-y,
yang memotong bagian yang keluar secara vertikal