Properti CSS text-overflow
Contoh
Penggunaan properti text-overflow:
div
{
white-space: nowrap;
overflow:
hidden;
text-overflow: ellipsis;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti text-overflow
menentukan bagaimana konten yang meluap yang tidak ditampilkan harus diisyaratkan kepada pengguna. Itu dapat dipotong, menampilkan elipsis (...), atau menampilkan string khusus.
Kedua properti berikut diperlukan untuk text-overflow:
- spasi putih: nowrap;
- melimpah: tersembunyi;
Nilai bawaan: | klip |
---|---|
Diwarisi: | tidak |
Animasi: | tidak. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.textOverflow="elipsis" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka yang diikuti dengan -o- menentukan versi pertama yang bekerja dengan awalan.
Property | |||||
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
Sintaks CSS
text-overflow: clip|ellipsis|string|initial|inherit;
Nilai properti
Value | Description | Play it |
---|---|---|
clip | Default value. The text is clipped and not accessible | |
ellipsis | Render an ellipsis ("...") to represent the clipped text | |
string | Render the given string to represent the clipped text | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Text-overflow dengan efek hover (tampilkan seluruh teks saat hover):
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
Halaman Terkait
Tutorial CSS: Efek Teks CSS
Referensi DOM HTML: properti textOverflow