Skip to main content

Cara Memperpendek Kata Pada Judul atau Snippet Blog

Memotong kata pada judul atau snippet blog merupakan cara jitu yang digunakan para desainer template untuk memperapi tampilan blog nya. 

Ada dua cara yang dapat anda gunakan untuk memotong kata pada judul artikel dan sebagainya. Yang pertama anda bisa menggunakan text-overflow: ellipsis dan yang kedua anda bisa menggunakan line-clamp

Diantara kedua alternatif diatas memiliki fungsi masing-masing, 

text-overflow: ellipsis berfungsi untuk memotong kata hanya pada satu baris saja. Sementara line-clamp berfungsi untuk memotong kata lebih dari satu baris, Perhatikan penjelasan lengkap dibawah ini.

Memotong Kata dengan text-overflow: ellipsis

Seperti yang saya jelaskan di atas, alternatif pertama ini berguna untuk memotong kata dalam 1 baris.

text-overflow: ellipsis diwajibkan memakai dua atribut yaitu overflow-hidden dan white-space: nowrap

Untuk CSS lengkapnya seperti di bawah ini

.box {
  text-overflow: ellipsis;
  /* Harus ada supaya berjalan ellipsisnya */
  overflow: hidden;
  white-space: nowrap;
}

Untuk demonya perhatikan jsfiddle di bawah ini.

Memotong Kata dengan line-clamp

Jika anda ingin memotong kata pada judul namun pada beberapa baris. Silahkan anda gunakan line-clamp

untuk contoh CSS wajibnya seperti dibawah ini :

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

Ganti webkit-line-clamp: 3 sesuai jumlah baris yang anda inginkan.

Perhatikan demo pada jsfiddle di bawah ini.

Note : text-overflow: ellipsis dan line-clamp sudah support semua browser, kecuali internet explorer.

BACA JUGA : Iframe harus menggunakan atribut title

Oke, saya rasa sampai disini dulu sedikit tutorial dari saya tentang cara memperpendek kata pada judul atau snippet blog. Semoga bermanfaat untuk anda.

www.repick.net

NOTE : Konten yang ada di blog ini asli karya Gio Lesmana. Tidak diperkenankan mengambil isi konten tanpa izin. Traktir saya kopi melalui: Paypal.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar