Cara menggunakan text-overflow pada css 3

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

<html>
   <head>
   <title>Cara menggunakan text-overflow css3</title>
      <style>
         p#text1 {
            width: 300px; 
            border: 1px solid #000000;
         }
         p#text2 {
            width: 300px; 
            border: 1px solid #000000;
         }
         p#text3 {
            width: 300px; 
            border: 1px solid #000000;
         }
      </style>
      
   </head>
   <body>
   
      <b>Original Text:</b>
   
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,</p>
      
      <b>Menggunakan Text overflow:clip:</b>
   
      <p id="text1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,</p>
      
      <b>Menggunakan Text overflow:ellipsis</b>
   
      <p id="text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,</p>

      <b>Menggunakan Text overflow:Next</b>
      <p id="text3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,</p>
      
   </body>
</html>

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

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

Hasil nya seperti gambar di bawah ini

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

Maka efeknya akan seperti gambar di bawah ini

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 🙂