Memotong Kalimat Dengan Baik dan Rapi

Ketika kita membuat sebuah kalimat yang begitu panjang dan sampai keluar dari pembungkus (elemen) tentunya akan menghasilkan bentuk kalimat yang kurang rapi dan berkesan acak-acakan.

Hal tersebut karena kurangnya perintah css untuk memperbaiki bentuk dari kalimat yang panjang tersebut.

Memang kerapihan bukan unsur utama dari isi kalimat, tapi dengan membuatnya rapi akan membuat yang melihat akan menyenangi dan tertarik untuk menindaklanjuti apa yang meraka cari. Untuk itu kita akan buat kalimat yang panjang terpotong dengan baik dan rapi menggunakan css.

Memotong

Dalam hal ini kita abaikan bagi yang tidak menyukai kerapihan, kita akan membuat sebuah kalimat panjang terpotong rapi dengan menggunakan css.

Mungkin kalian masih binggung dari maksud memotong kalimat dengan rapi ini, untuk itu saya akan memberikan gambaran seperti apa kalimat yang terpotong dengan baik dan rapi tersebut.

Contoh

#text {
    width: 200px; 
    height: 20px;
    border: 1px solid #000000;
}

Dengan ukuran elemen panjang 200px dan tinggi 18px akan menghasilkan kalimat yang akan keluar dari elemen tersebut turun kebawah, karena tidak cukup ruang untuk kalimat yang panjang.

Ini merupakan contoh kalimat yang panjang dan akan keluar dari elemen

Jika kita tambah properti white-space:nowrap akan menghasilkan kalimat keluar memanjang seperti contoh dibawah ini:

#text {
    white-space: nowrap; 
    width: 200px; 
    height: 20px;
    border: 1px solid #000000;
}

Ini merupakan contoh kalimat yang panjang dan akan keluar dari elemen

Keadaan ini akan membuat kalimat yang keluar dari pada cangkangnya, kita bisa membuat kalimat yang panjang tersebut tidak keluar dari cangkang, yaitu dengan memotong kalimat tersebut sesuai dengan lebar ruang (cangkang) dengan menambah properti overflow:hidden, properti overflow:hidden akan memotong kalimat yang panjang menyesuailan panjang dari ruang kalimat tersebut, sehingga menjadi seperti ini:

#text {
    width: 200px; 
    height: 20px;
    border: 1px solid #000000;
    white-space: nowrap; 
    overflow: hidden;
}

Ini merupakan contoh kalimat yang panjang dan akan keluar dari elemen

Sebenarnya dengan properti overflow:hidden, kalimat yang panjang sudah bisa terpotong dengan rapi, tapi tidak ada salahnya kita tambah properti lagi untuk membuat kalimat panjang terpotong rapi dengan baik,yaitu menambahkan properti text-overflow:ellipsis seperti dibawah ini:

#text {
    width: 200px; 
    height: 20px;
    border: 1px solid #000000;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

Ini merupakan contoh kalimat yang panjang dan akan keluar dari elemen

Nah seperti terlihat dalam contoh, kalimat panjang akan terpotong dengan rapi dan baik dari segi tampilan.

Masalah

Perlu diperhatikan properti text-overflow:ellipsis tidak berjalan baik jika ruang (cangkang) dari kalimat tersebut menggunakan nilai dalam bentuk % selain itu wajib ada properti overflow:hidden dan properti white-space:nowrap.

Selain text-overflow dengan nilai ellipsis, masih ada beberapa nilai text-overflow dengan nilai clip, initial, inherit dan string kalian bisa mencoba mengganti nilai text-overflow dengan nilai yang lain dan lihat hasilnya.

Seperti sebelumnya, akhir kata semoga tulisan ini bisa bermanfaat dan mudah untuk dimengerti.