Halo teman-teman pada kesempatan kali ini saya akan menjelaskan tentang Fungsi Properti text-overflow Pada CSS.Properti text-overflow menentukan bagaimana menangani teks inline yang meluap kontainer blok atau pembungkus yang menentukan ukuran teks tersebut, artinya memungkinkan teman-teman untuk menentukan apa yang akan ditampilkan pada titik-titik di mana teks tersebut melebihi ukuran dari pembungkus tersebut. Teks dapat meluap dari wadah blok hanya ke arah kemajuan inline-nya. Teks mungkin meluap ketika dicegah dari pembungkus (misalnya karena white-space: nowrap) atau satu kata yang terlalu panjang. Sebagai contoh:

1

Seperti yang teman-teman lihat, teks meluap dari wadah tetapi teks yang berlebih tersebut tidak disembunyikan. Jadi, tanpa properti text-overflow tidak berpengaruh pada elemen. Agar teks-overflow bekerja, Teman-teman perlu untuk klip teks yang meluap wadah. Hal ini dapat dilakukan dengan menetapkan properti overflow elemen yang tersembunyi, atau nilai apapun selain terlihat. Menggunakan overflow: hidden, teks di atas menjadi:

2

Ketika overflow diatur untuk disembunyikan, teks yang terpotong, dan karakter dapat hanya sebagian diberikan, seperti yang Anda lihat dalam contoh di atas. Ini adalah cara default teks meluap ditangani. Default awal nilai teks-overflow klip.

Dengan teks-overflow, teman-teman dapat menentukan bagaimana memberi tahu pengguna bahwa beberapa teks meluap elemen. Misalnya, alih-alih kliping teks pada titik overflow, Teman-teman dapat memberi tahu browser untuk menambahkan karakter elipsis untuk mewakili teks yang terpotong. Dalam browser yang tidak mendukung karakter elipsis dan tidak dapat menampilkannya, tiga titik “…” akan ditampilkan sebagai gantinya.

Dan hasilnya akan menjadi seperti dibawah ini:

3

Sisi garis yang elipsis ditempatkan tergantung pada arah blok. Misalnya. overflow tersembunyi kanan ke kiri konten blok klip inline di sisi kiri, sehingga akan menempatkan ellipsis teks-overflow di sebelah kiri untuk mewakili yang terpotong konten. Demikian Fungsi Properti text-overflow Pada CSS. Semoga bermanfaat.