Hallo sobat, apa kabar semuanya salam hangat dari saya. Kembali lagi dengan saya di tutorial Dumet School, pada artikel kali ini kita akan belajar Cara menggunakan text-overflow pada css3. Text-overflow ini memiliki 3 jenis penggunaannya yaitu text-overflow (clip, ellipsis, …Next) dan masing-masing ini memiliki fungsi yang berbeda-beda.

Nah sekarang mari kita implementasikan, seperti biasa siapkan text editornya lalu copy kan script nya di bawah ini

Lalu save dengan index.html, dan jalankan pada browser nya. Maka output sementara akan menghasilkan seperti gambar di bawah ini.

Cara menggunakan text-overflow pada css 3

Langkah berikutnya kita akan praktekkan Cara menggunakan text-overflow pada css 3.

Teman-teman tambahkan masing-masing id nya dengan text-overflow (clip, ellipsis, …Next) dan berikan white-space: nowrap; agar text akan menghasilkan tampilan inline

Cara menggunakan text-overflow pada css 3

Hasil nya seperti gambar di bawah ini

Cara menggunakan text-overflow pada css 3

Bisa kalian lihat pada gambar diatas yang saya beri kotak warna orange adalah efek dari fungsi dari text-overflow (clip, ellipsis, …Next) dan white-space: nowrap;

Text akan melewati batas border bagian kanan, yang terakhir kita berikan overflow:hidden; di setiap css nya

Cara menggunakan text-overflow pada css 3

Maka efeknya akan seperti gambar di bawah ini

Cara menggunakan text-overflow pada css 3

text-overflow:clips; akan menghasilkan text terpotong oleh border.

text-overflow:ellipsis; akan menghasilkan text terpotong oleh border namun pada text belakang ada output titik-titik.

text-overflow:…Next; akan menghasilkan text terpotong oleh border namun pada text belakang ada output titik-titik dan ada text Next.

Sangat mudah bukan, fungsi ini bisa kalian gunakan pada studi case tertentu yang menggunakan text-overflow (clip, ellipsis, …Next). Baik, sekian dulu pada tutorial kali ini tentang Cara menggunakan text-overflow pada css 3. Kita berjumpa lagi di tutorial berikutnya, Terima Kasih dan Sampai Jumpa.

Semoga bermanfaat 🙂