Sifat text-overflow

Sifat text-overflow menambah elipsis pada hujung teks terpotong sebagai tanda bahawa teks tidak muat dalam blok dan telah dipotong.

Untuk sifat ini berfungsi, teks mesti dipotong melalui sifat overflow atau sifat overflow-x dengan nilai hidden, auto atau scroll. Jika diletakkan visible (dan ia adalah lalai) - text-overflow tidak akan berfungsi.

Sintaks

pemilih {
	text-overflow: ellipsis | clip;
}

Nilai

Nilai	Keterangan
`ellipsis`	Menambah elipsis pada hujung teks terpotong.
`clip`	Tidak menambah elipsis pada hujung (nilai ini adalah lalai, diperlukan untuk membatalkan tindakan sifat jika perlu).

Nilai lalai: clip.

Contoh . Teks Melebihi

Dalam contoh ini, perkataan yang sangat panjang tidak akan muat dalam bekas dan akan melebihi sempadannya. Tiada pemotongan berlaku:

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

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

Contoh . Tambah Sifat overflow

Sekarang, semua yang melebihi sempadan bekas hanya akan dipotong:

<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 sebagai tambahan kepada sifat overflow kita tambahkan juga text-overflow dengan nilai ellipsis. Elipsis akan ditambahkan pada hujung teks terpotong:

<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 Bar Tatal

Jika diletakkan overflow: auto dan text-overflow: ellipsis, bar tatal akan muncul, tetapi elipsis masih akan ditambah. Cuba tatal bar tatal 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 Tiada Perkataan Sangat Panjang

Jika tiada perkataan yang cukup panjang sehingga melebihi sempadan bekas, maka pemotongan tidak akan berlaku (kerana tiada yang melebihi). Lihat 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 Satu Baris

Walau bagaimanapun, terdapat situasi di mana kita mahu teks dipotong jika ia terlalu panjang (teks secara keseluruhan, bukan perkataan individu) dan tidak di bawa ke baris seterusnya. Ini dilakukan dengan menambah sifat white-space dengan nilai nowrap, yang akan melarang teks dibawa ke baris lain. Lihat pada 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 Peratusan

Jika lebar blok diletakkan dalam %, pemotongan juga akan berfungsi dengan betul:

<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

sifat word-break dan overflow-wrap,
yang membenarkan huruf perkataan panjang dibawa ke baris baru
sifat hyphens,
yang mengaktifkan pemotongan perkataan mengikut suku kata
sifat overflow,
yang memotong bahagian yang melebihi sempadan blok