Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Cara memotong Kata / Karakter pada Judul Artikel atau Deskripsi

Memahami CSS ellipsis dan line-clamp untuk memotong karakter

Cara memotong Karakter atau Kalimat - Ada beberapa cara yang bisa dilakukan untuk memotong kalimat supaya tidak terlalu panjang. Biasanya ini dilakukan pada Judul Artikel atau Deskripsi postingan.

Oke sob, sesuai request dari Bang Rino, tentang Bagaimana cara mempersingkat jumlah karakter kata pada judul artikel, kali ini kita akan memahami beberapa CSS yang bisa digunakan.

text-overflow: ellipsis

text-overflow: ellipsis bisa digunakan untuk memangkas karakter pada satu baris saja. Syaratnya harus disertakan overflow: hidden dan white-space: nowrap. Untuk contoh CSS seperti ini:

.box {
  text-overflow: ellipsis;

  /* Harus ada supaya berjalan ellipsisnya */
  overflow: hidden;
  white-space: nowrap;
}

untuk demonya, silahkan uji coba juga di JsFiddle

line-clamp

line-clamp bisa digunakan untuk memangkas lebih dari satu baris. Syarat wajib CSSnya harus seperti ini :

.box {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

-webkit-line-clamp: 3 angka 3 pada valuenya menunjukan pada baris ke berapa akan terpotong. Bisa baris 2, 3, 4, dst... Silahkan intip demonya:

Browser support

Untuk line-clamp dan ellipsis support semua browser, kecuali Internet Exploler.
Semoga bermanfaat...

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

8 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. "Comments is my content" hihihi... seperti itulah, ide bisa datang dari mana saja.

    Yang pakai ellipsis biasanya jurus terakhir demi kerapihan... hehehe....
    1. betul kang, ide itu bisa dari apa saja..
      yang jelas.. blog onoh ga pake ellipsis, malah sengaja panjang kaya judul TV anu.. hahah
  2. Hahaha... maksa mainin emosi emak-emak
    1. hahaha saya juga emosi scroll ga abis2
  3. Terima kasih kang sudah dibuatkan tutorialnya, lengkap sekali, langsung praktek..
    1. sama2 bang,, sukses terus
  4. Kalau judul artikel dibuat hanya 2 kata aja bisa mas untuk amp
    1. maksudnya 2 kata gimana? pake ellipsis atau aslinya 2 kata?
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.