Cara memotong teks kata / kalimat dengan CSS

imamzw

code, css, tutorial

Sunday, April 13, 2014

1 Komentar

Cara memotong kata / kalimat dengan CSS - How to cut text / sentences with CSS - Archmaxter.com.  Artikel ini akan membahas bagaimana memotong kalimat dengan CSS pada kelebaran (width) tertentu.

Pernahkah Anda terpikir untuk memotong / men-cut kalimat dengan CSS ? Kalau dengan JavaScript sih banyak yang sudah tahu dan banyak tutorialnya. Tapi, apakah kamu tahu kelebihan memotong kata / kalimat dengan CSS hubungannya erat loading blog.  Dan algoritma baru-baru ini yang diberlakukan google adalah semakin cepat loading suatu blog, maka semakin cepat terindex google (SEO).

Mari Saya beri contoh.  Lihat gambar di bawah !

Bagus & rapih yang mana dari perbandingan pada gambar di atas ?

Untuk melakukan hal tersebut, Saya menggunakan kode CSS code :

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Pasanglah kode CSS di atas, pada tag ul li a atau ul li atau di mana saja. Bisa di popularpost, recent-post, daftar-daftar link, dll.

Sebagai contoh, kode Saya menerapkan di Popular post yang ada di sidebar blog ini :

.sidebar li {
    color: #000; 
    list-style: none;padding: 0
    display: block; 
    border-bottom:1px dotted #ccc;
    padding: 8px 0; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Semoga bermanfaat ;)

Begitulah tentang Cara memotong teks kata / kalimat dengan CSS . Semoga bermanfaat untuk Anda. Jika ada hal yang ingin ditanyakan, silahkan berkomentar. Dan jika Anda menyukai artikel ini, silahkan klik tombol share di bawah. Terima kasih..! ;)