Cara memotong Karakter Pada Judul Atau Kalimat

April 21, 2021

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

Kali ini kita akan belajar bagaimana kita dapat memotong judul atau deskripsi posting mengunakan CSS.

Mengunakan 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 CodePen
Menggunakan 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: