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:
overflow akan berjalan dengan baik jika kode yang dituliskan pada deklarasi tersebut lengkap, tidak ada yang tertinggal, yaitu:
blogger
CSS
Tips ngeBLOG
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>hasilnya menjadi seperti ini:
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>
ini teks panjang, teks ini akan terpotong didalam tag div yang diberi style overflowCATATAN Kesimpulan;
contoh menggunakan style text-overflow:ellipsis terpotong menjadi titikini teks panjang, teks ini akan terpotong didalam tag div yang diberi style overflow
yang ini menggunakan style text-overflow:clip terpotong tanpa titikini teks panjang, teks ini akan terpotong didalam tag div yang diberi style overflow
overflow akan berjalan dengan baik jika kode yang dituliskan pada deklarasi tersebut lengkap, tidak ada yang tertinggal, yaitu:
white-space:nowrap;Ini hanya catatan untuk saya saja. Bila anda ingin bertanya atau memberi tanggapan silahkan tanyakan lewat kolom komentar dibawah ini.
overflow:hidden;
text-overflow: ellipsis;
Post a Comment