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)

CSS3 Text Özellikleri / Fatih Hayrioğlu'nun not defteri diyor ki:

Aralık 2, 2011, 01:12

[...] http://www.fatihhayrioglu.com/satir-donusuword-wrap-firefox-sorunu-nasil-cozulur/#idc-cover [...]

Cevapla

sinan diyor ki:

Nisan 13, 2011, 18:38

Tekrar tarayıcı destekleri değiştimi bilmiyorum ama ben sadece:
div {word-wrap: break-word;}
stili ile işi bitirdim. explorer 7, firefox 3.6 ve chrome 10~ da tam sorun çıkarmadan çalıştı. İlginç olan şu ki css3 stili olan "white-space" çalışmadığı halde word-wrap çalışıyor.

Cevapla

fatihhayri diyor ki:

Mayıs 30, 2011, 22:48

yukarıdaki kod bende çalışıyor

Cevapla

Burak Maleri diyor ki:

Mart 20, 2010, 08:45

üstadım ben şöyle bir kısımda takıldım. Cümle satırbaşı yapıyor ancak satıra verdiğim değerler satır başında tekrar sıfırdan başlasın istiyorum. Yani atadığım background un içinde satır başı yapmasın satır başı yaptktan sonra tekrar background alsın cümle.

Olmasını istediğim şekil : http://img200.imageshack.us/i/40005258.jpg/
Çıkan sonuç : http://img682.imageshack.us/i/h12g.jpg/

şimdiden teşekkürler.

Cevapla

fatihhayri diyor ki:

Mart 20, 2010, 10:21

Bu yazını olduğu kısmı display:inline-block yaparak deneyebilirmisiniz

Cevapla
- Burak Maleri diyor ki:
  
  Mart 20, 2010, 18:44
  
  maalesef üstadım display:inline-block ile olmuyor. display:inline kullanarak satırların backgroundlarını birbirinden ayrı olarak algılamasını sağlayabildim ancak bu şekilde de ikinci satırı diğer satıra göre daha içeride algılıyor. Yani şu aşamaya getirebildim.
  
  link: http://img257.imageshack.us/img257/7269/78527595….
  
  Cevapla
  - Burak Maleri diyor ki:
    
    Mart 20, 2010, 18:54
    
    üstadım sorunu çözdüm. h2 tagına ayrıca bir div daha açıp sorunu giderdim. Display:inline yaptıktan sonra line-height atayarak satır aralarını açtım ve sorun çözülmüş oldu. teşekkürler
    
    Cevapla