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 pemikiran pada “CSS : word-wrap for IE

  1. 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 http://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.

    Suka

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s