Deklarasi Penting CSS Text Overflow

Sering kali saya bingung sendiri ketika menerapkan deklarasi Text-Overflow Pada judul/tag h2 dalam desain pembuatan template saya di home page untuk mempersingkat teks yang terlalu panjang. Pikir saya kode css  text-overflow: ellipsis; sudah cukup ternyata masih tidak berkerja dengan baik.

Untuk masalah ini ternyata ada kode yang terlewatkan untuk mengubah ujung teks panjang menjadi titik-titik ini. Kode yang harus ada untuk menemani text-overflow: ellipsis; selengkapnya sebagai berikut:
<style> 
div.test
{
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
border:1px solid #000000;
width:12em;
}
</style>

<body>
 
<p>ini teks panjang, teks ini akan terpotong didalam tag div yang diberi style overflow</p>
 
<p>contoh menggunakan style <b>text-overflow:ellipsis</b>  terpotong menjadi titik</p>
<div class="test" style="text-overflow:ellipsis;">ini teks panjang, teks ini akan terpotong didalam tag div yang diberi style overflow</div>
 
<p>yang ini menggunakan style <b>text-overflow:clip</b> terpotong tanpa titik</p>
<div class="test" style="text-overflow:clip;">ini teks panjang, teks ini akan terpotong didalam tag div yang diberi style overflow</div>
</body>

hasilnya menjadi seperti ini:
ini teks panjang, teks ini akan terpotong didalam tag div yang diberi style overflow

contoh menggunakan style text-overflow:ellipsis terpotong menjadi titik
ini teks panjang, teks ini akan terpotong didalam tag div yang diberi style overflow

yang ini menggunakan style text-overflow:clip terpotong tanpa titik
ini teks panjang, teks ini akan terpotong didalam tag div yang diberi style overflow
CATATAN Kesimpulan;
overflow akan berjalan dengan baik jika kode yang dituliskan pada deklarasi tersebut lengkap, tidak ada yang tertinggal, yaitu:
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
Ini hanya catatan untuk saya saja. Bila anda ingin bertanya atau memberi tanggapan silahkan tanyakan lewat kolom komentar dibawah ini.

Komentar

Postingan populer dari blog ini

Kumpulan Pribahasa Arab Lengkap - Mahfudzot

DO'A SEORANG LELAKI UNTUK GADIS PUJAANNYA

FATIN SHIDQIA - Jalan Cinta (Sherina) 19 April