Halaman

CSS : word-wrap for IE

Sepastinyalah bila kata-kata word wrap terasa akrab di lingkungan aplikasi text berbasis Windows.Sebut saja Notepad, WordPad (saat kita ingin membungkus text seukuran jendela aplikasi),Word (misalnya saat kita ingin menyeting word-wrap untuk kata-kata berbahasa Inggris disaat bekerja di lingkungan text menggunakan East Asia), dan banyak lagi.

CSS di IE pun tak luput dari kata-kata ini.Lalu apa gunanya?

Masih ingat postingan yang lalu tentang bangunan template Blogger yang terdiri dari Main, Content,Sidebar? Ok, ini masih berhubungan dengan hal itu.

Anggap kita memiliki lebar Content 740 px, Main 485 px, lalu Sidebar 240 px.Terkadang tanpa kita sadari saat memasukkan tautan/link ke dalam postingan kita menuliskanya secara utuh, semisal http://www.domainku.com/admin/intern/download/gratis/aplikasi/blablabla.htm, maka dari 76 karakter tersebut kemungkinan akan menyeruak keluar menabrak bagian Sidebar.Hasilnya? saat kita buka di browser IE, sidebar turun jauh kebawah.Nah untuk itulah properti word-wrap diperlukan, cukup bubuhkan tag berikut :

word-wrap:break-word;

di bagian .post-body, sehingga akan tampil seperti ini (untuk contoh):

.post-body {
line-height: 140%;
word-wrap:break-word;
}


Maka IE akan memberlakukan word-wrap dalam bagian Main.Ingat, hanya IE.Browser diluar IE akan mengacuhkan bagian word-wrap:break-word.Hasilnya? tentu bila kita cek di IE alamat URL yang panjang tadi akan terpotong kebawah tanpa mengenai bagian Sidebar.

2 komentar:

  1. gimana caranya buat blog kita supaya bisa dibaca ama semua browser.tolong yach mas ....

    BalasHapus
  2. selain kegiatan yg bersifat manual dalam artian mengeceknya secara langsung ke tiap browser (dan ini jelas kurang efektif), coba gunakan beberapa layanan dari web spt www.browsercam.com, browsershots.org, atau juga bila anda punya halaman html dan membuatnya dengan macromedia dreamweaver, di dalamnya juga sudah tersedia menu untu cek di browser yang kita install di PC kita.

    BalasHapus

Kamu bisa dapetin ilustrasi wajah yang sesuai dengan wajah kamu di moselo.com/Bikingemeys. Jangan lupa ada promo jika pesan dari aplikasinya langsung.