Satır Dönüşü(word wrap) Firefox sorunu nasıl çözülür?

http://forum.ceviz.net/showthread.php?p=249585#post249585

Cevap yazarken araştırdım da burayada yazayım dedim. Sabit bir genişlikte bir katman oluştuurp bu genişliği aşan genişlikte içerikleri otomatik olarak satırın başına tmak için ne yapabiliriz. Normalde bunu için IE5.5+ dan itibaren word-wrap: break-word kodu ile bunu desteklemektedir, ancak Mozilla tabanlı web tarayıcıları(örn Firefox) bu koda banamısın demiyor. Çözüm

pre
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

<pre>uzuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuun metin</pre>

12 Şubat 2010′dan sonra düzenleme yapıldı

Bu yazıyı yazdığımda Firefox 2 vardı ve yazdığım çözüm işe yaramamıştı. Şimdi işler değişti. white-space: pre-wrap özelliğini ve değerini Firefox 3′dan itibaren desteklediği için artık kodumuzu aşağıdaki gibi değiştirebiliriz. Opera eski sürümlerinide es geçerek tabi, gerçi Opera 10′nun desteklendiği söyleniyor, ama benim testimde olmadı.

pre
{
    white-space: pre-wrap; /* css-3 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Kaynaklar

21 Yorum (Yorum Ekle)

Deutscher Ingenieur diyor ki:

Mart 17, 2009, 14:29

Önceki mesajımdaki html etiketleri yok olmuş. Yok olan etiketleri tekrar yazmam mümkün olmadığı için önceki mesajımı böyle tamamlıyorum, kusura bakmayın:

1)
Birinci Aşama komple sayfanın head kısmına geliyor. Bunların içinde

.wordwrap, Style etiketi içine alınmış bir stil sınıfıdır. Diğer şeyler Script etiketine alınmış javascript.

2)
İkinci Aşama son Body’den (yani / Body) hemen önce yazılıyor, yani sayfanın en sonuna. Gene Script etiketi içine almanız gerekiyor.

Not: Eğer tablonuzda hücrelerin içine link verirseniz, Firefox bu linkin html etiketlerini işlemeden gösteriyor. Böyle bir problem olabilir.

Bildiğiniz gibi olayın çıkış noktası Firefox’da yıllardır düzeltilmeyen “resmi bir Bug”. Bu yüzden yapabildiğimiz kadar trick uyguluyoruz, linklerde sorun çıkmasını henüz bugün fark ettim ancak çaresiz değil, biraz zaman alacak, burada paylaşacağım.

Cevapla

Deutscher Ingenieur diyor ki:

Mart 15, 2009, 20:52

Arkadaşlar,

Firefox’da word-wrap sorunu vardır. Problemi ve çözümünü aşağıda veriyorum.

xxxxxxx xxxxxxx xxxx xxxxxxx şeklinde bir metini tabloda CSS kullanarak tablo hücresine sığdırabilirsiniz.

Ama;

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx şeklinde aralıksız yazılmış bir karakter katarı Firefox’da html tablonuzun büyümesine neden olacaktır. Width olarak ne ayarlarsanız ayarlayın.

Bunun çözümünü uzun saatler süren bir arayış sonunda buldum. Ve biraz da modifiye ettim:

1)
Sayfanızın kısmına aşağıdaki kodu ekleyin:

.wordwrap
{
word-wrap:break-word;
}

Kod Burada Bitmiştir.

2)
Sayfanızda ‘den hemen önce şu kodu ekleyin:

wordwrap();

3)
Word-wrap olayının etkilemesini istediğiniz tüm html tablo td’lerinizin stil sınıfını “wordwrap” yapın.

Örnek: xxxxxxxxxxxxxxxxxxxxxxxxxxx

Bu kadar. Bendeki denemelerde Firefox word-wrap’ı boşluksuz metinde de uyguladı.

Nasıl çalışıyor?

Javascript tüm td’lerin içinde wordwrap sınıfına ait olanları buluyor, içerisindeki metinin karakterlerinin arasına etiketini yerleştiriyor ve bu etiket sayesinde uygun olan noktada Firefox metni bölüp alt satıra devamını yazıyor.

Çözüme ilave:
Dilerseniz wordwrap sınıfını CSS’de direkt td ile değiştirerek tüm td’leri bu özelliğe getirebilirsiniz. Bu durumda td’lere tek tek class=”wordwrap” yazmanız gerekmez. Ama javascripti de ona uygun olarak modifiye etmeniz gerekecek çünkü bu haliyle td’lerde wordwrap sınıfını arıyor.

Cevapla

kürşat diyor ki:

Aralık 3, 2008, 12:02

hocam,hiçbi wrapper kullanmadan direkt entere basarak bir alt satıra inersek,yine aynı sonuvu veriyor.IE ve mozilla bende bi sorun vermedi.bunun güvenliği nasıldır?kullanışlı olurmu?cevaplarsanız sevinirim.şimdiden teşekkürler.

Cevapla