Öneri ve Hata Raporu



Günün Sözü Asla yalnız yürümeyeceksin

kategori CSS
oylama 3/5 yorum 4 yorum yazar Hakan Taşan tarih 23 Kasım 2013

word-wrap özelliği CSS3 ile birlikte geldi. Çok fazla kullanılan ve internette birçok sitede tartışılan konulardan birisidir. word-wrap özelliği belli bir alana (örneğin; div) sığmayan yazıları, kelimeleri kesip alt satıra atmasıdır. word-wrap'in alabileceği 2 değer vardır; normal ve break-word. 2 değer de taşan yazıyı kesip alt satıra atar ama genellikle break-word kullanılır.

Syntax

word-wrap: normal;
word-wrap: break-word;

 

1) normal

Alana sığmayacak boyuttaki kelimeyi kesmez ve alandan taşmasına izin verir, kelime bitiminde alt satırdan devam eder.

CSS Kodu

p
{
    width:200px; 
    border:1px solid #000000;
    word-wrap:normal;
}

 

HTML Kodu

<p>Bu paragrafta çok uzun bir kelime var. Hem de çooooooooooooooooooooooooooooooooook uzun bir kelime. Alana sığmayan bu kelime kesilmeyecek ve bitiminde alt satıra geçecek.</p>

 

2) break-word

Alana sığmayacak boyuttaki kelimenin sığmayan kısmını alt satıra atar. Kelimeyi taşan kısmından parçalar.

CSS Kodu

p
{
    width:200px; 
    border:1px solid #000000;
    word-wrap:break-word;
}

 

HTML Kodu

<p>Bu paragrafta çok uzun bir kelime var. Hem de çooooooooooooooooooooooooooooooooook uzun bir kelime. Alana sığmayan bu kelime kesilecek ve taşan kısmı alt satıra atılacak.</p>

 

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

4 Yorum


yorum

adam adam

19 Ocak 2019 23:04


sen adamsın adam

yorum

mehmet

21 Nisan 2019 18:12


Güzel bir tutorial olmuş teşekkürler ellerinize sağlık.

yorum

Ümit Demirel

17 Mayıs 2020 04:21


Şu kod o kadar işime yaradı ki . Allah razı olsun word-wrap:break-word;

yorum

Ümit demirel

17 Mayıs 2020 04:23


bu arada yorumu gönderdikten sonra yukarıda javascipt kodu çıkıyor. bana bu kod lazım. Benzer bi sitem var. bana bu kodu mail olarak yollarmısın.