Memotong Text dengan Rapi Menggunakan Properti overflow:hidden dan Text-Overflow di CSS

Haloo kembali lagi di artikel saya , kali ini saya akan memberikan tips bagaimana Memotong Text Dengan Rapi Menggunakan Properti overflow:hidden Dan Text-Overflow Di CSS. Bagi properti overflow:hidden mungkin dari kalian telah banyak yang tahu gunanya nah kali ini saya lebih menyampaikan properti yang satu lagi yaitu Text-Overflow . Gunanya dari text overflow sendiri yaitu bagi menangani inline text yang berlebihan dari suatu container dengan menentukan bagaimana text-overflow di tandai agar user paham kalau text tersebut terlalu panjang bagi di tampilkan.  

Sesungguhnya kita dapat saja memotong dengan overflow:hidden tetapi user tak akan paham bila text tersebut memang sengaja di potong.

Oke seketika praktek aja ya :

Contohnya seperti ini :

Apabila ada text inline yang berlebihan seperti ini kita dapat memotongnya dengan menggunakan overflow:hidden karenanya hasilnya akan seperti ini :

Nah text nya akan terpotong tepat di pojok container,  tetapi kalau hanya seperti ini kurang menarik kalu dari segi user experience , saatnya kita menggunakan properti text-overflow.  Salin code berikut :

HTML//

<div class=container>
  <div class=el>
    This is some long sentence that cannot wrap, so it overflows the element.
  </div>
</div>

CSS//

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.el {
  border: 1px solid black;
  white-space: nowrap;
  max-width: 450px;
  padding: 0.5em 1em;
  background: white;
  overflow: hidden;
 text-overflow: ellipsis ;
}

Setelah kita menambahkan text-overflow karenanya hailnya akan seperti ini :

Dapat diperbandingkan perbedaannya ? 🙂 ada beberapa value yg dapat di berikan di text-overflow :

Oke demikian dulu hingga bertemu di artikel yang lainnya 🙂

Sumber https://kursuswebsite.org