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

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

Sebenarnya kita bisa saja memotong dengan overflow:hidden tetapi user tidak akan mengerti jika text tersebut memang sengaja di potong.

Oke langsung praktek aja ya :

Contohnya seperti ini :

Jika ada text inline yang berlebihan seperti ini kita bisa memotongnya dengan menggunakan overflow:hidden maka 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 maka hailnya akan seperti ini :

Bisa dibandingkan perbedaannya ? 🙂 ada beberapa value yg bisa di berikan pada text-overflow :

Oke sekian dulu sampai bertemu pada artikel yang lainnya 🙂