Properti text-overflow

Properti text-overflow menambahkan elipsis di akhir teks yang dipotong sebagai tanda bahwa teks tidak muat dalam blok dan telah dipotong.

Agar properti ini bekerja, teks harus dipotong melalui properti overflow atau properti overflow-x dengan nilai hidden, auto atau scroll. Jika diatur ke visible (dan ini nilai defaultnya) - text-overflow tidak akan bekerja.

Sintaksis

selektor {
	text-overflow: ellipsis | clip;
}

Nilai

Nilai	Deskripsi
`ellipsis`	Menambahkan elipsis di akhir teks yang dipotong.
`clip`	Tidak menambahkan elipsis di akhir (ini adalah nilai default, diperlukan untuk membatalkan aksi properti jika diperlukan).

Nilai default: clip.

Contoh . Teks yang Melebihi Batas

Dalam contoh ini, kata yang sangat panjang tidak akan muat dalam kontainer dan akan melebihi batasnya. Tidak terjadi pemotongan:

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

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

Contoh . Tambahkan Properti overflow

Sekarang, semua yang melebihi batas kontainer akan dipotong begitu saja:

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

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

Contoh . Nilai ellipsis

Sekarang, selain properti overflow tambahkan juga text-overflow dengan nilai ellipsis. Teks yang dipotong akan ditambahkan elipsis di akhir:

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

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Contoh . Dengan Scrollbar

Jika mengatur overflow: auto dan text-overflow: ellipsis, maka scrollbar akan muncul, tetapi elipsis tetap akan ditambahkan. Coba gulir scrollbar dalam contoh:

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

#elem {
	width: 200px;
	overflow: auto;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Contoh . Jika Tidak Ada Kata yang Sangat Panjang

Jika tidak ada kata yang cukup panjang hingga melebihi batas kontainer, maka pemotongan tidak akan terjadi (tidak ada yang melebihi batas). Lihatlah contoh berikut:

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

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Contoh . Teks dalam Satu Baris

Namun, ada situasi di mana kita ingin teks dipotong jika terlalu panjang (teks secara keseluruhan, bukan kata individual) dan tidak berpindah ke baris berikutnya. Hal ini dilakukan dengan menambahkan properti white-space dengan nilai nowrap, yang akan melarang perpindahan teks ke baris lain. Lihatlah contoh, sekarang teks dipotong:

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

#elem {
	width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Contoh . Lebar dalam Persentase

Jika mengatur lebar blok dalam %, pemotongan juga akan bekerja dengan benar:

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

#elem {
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Lihat Juga

properti word-break dan overflow-wrap,
yang memungkinkan untuk memindahkan huruf kata panjang ke baris baru
properti hyphens,
yang mengaktifkan pemenggalan kata berdasarkan suku kata
properti overflow,
yang memotong bagian-bagian yang melebihi batas blok