word- ile Başlayan Özellikler

word-spacing

Bu özellik ile kelimeler arasındaki boşluk ayarlanır. Varsayılan değer normal değeridir. Bu durumda kelimeler arasına normal şekilde boşluk konur. Bunun dışında değer olarak uzunluk da girilebilir. Bu durumda kelimeler arasına bu uzunluk kadar fazladan boşluk eklenir. Negatif değerler de girilebilir. Bu özellikle yapılan biçimlendirmeler alt elemanları da etkiler.

<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
word-spacing:normal;
}
p.ornek2{
word-spacing:0px;
}
p.ornek3{
word-spacing:5px;
}
p.ornek4{
word-spacing:-5px;
}
</style>
</head>
<body>
    <p class="ornek1"> Kelimeler arası normal boşluk</p><br/>
    <p class="ornek2"> Kelimeler arası boşluk değeri 0px</p><br/>
    <p class="ornek3"> Kelimeler arası boşluk değeri 5px</p><br/>
    <p class="ornek4"> Kelimeler arası boşluk değeri -5px</p><br/>
</body>
</html>

word-break

Bu özellikle alt satıra geçişlerde hangi kuralların uygulanacağı belirtilir. Varsayılan değer olan normal kelimelerin normal kurallara göre bölüneceğini belirtir. Bu durumda kelimeler genellikle alt satıra geçişlerde bölünmez. break-all değeri kullanıldığında tarayıcı alt satıra geçerken kelimeyi bölüp bölmemeye dikkat etmez. keep-all değeri kullanıldığında ise kelime uzun da olsa iki harf arasından bölünme gerçekleştirilmez. Bu değerin normal değerinden farkı Çince, Japonca ya da Korece karakterler kullanıldığında ortaya çıkar. normal değerinde bu karakterler arasında bölünme gerçekleşirken keep-all değerinde bu gerçekleşmez.

<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
p{
width:100px;
border: 1px solid black;
}
p.ornek1{
word-break:normal;
}
p.ornek2{
word-break:break-all;
}
p.ornek3{
word-break:keep-all;
}
</style>
</head>
<body>
    <p class="ornek1"> Bu paragrafta kelime içinde bölünme gerçekleştirilmez. Afyonkarahisarlılaştıramadıklarımızdan mısınız?</p><br/>
    <p class="ornek2"> Bu paragrafta kelime içinde bölünme gerçekleştirilebilir. Afyonkarahisarlılaştıramadıklarımızdan mısınız?</p><br/>
    <p class="ornek3"> Bu paragrafta kelime içinde bölünme gerçekleştirilmez. Afyonkarahisarlılaştıramadıklarımızdan mısınız?</p><br/>
</body>
</html>

Bu özellikle yapılan biçimlendirmeler alt elemanları da etkiler.


word-wrap

Bu özellik de satır geçişlerinde kelimelerin bölünüp bölünmeyeceği ile ilgilidir. Varsayılan değer olan normal kullanıldığında kelimelerde bölünme olmaz. break-word değeri kullanıldığında ise uzun kelimeler bölünebilir. Yine de tarayıcı gerekmedikçe kelimeleri bölmemeye çalışacaktır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
p{
width:110px;
border: 1px solid black;
}
p.ornek1{
word-wrap:normal;
}
p.ornek2{
word-wrap:break-word;
}
</style>
</head>
<body>
    <p class="ornek1"> Bu paragrafta kelime içinde bölünme gerçekleştirilmez. Afyonkarahisarlılaştıramadıklarımızdan mısınız?</p><br/>
    <p class="ornek2"> Bu paragrafta kelime içinde bölünme gerçekleştirilebilir. Afyonkarahisarlılaştıramadıklarımızdan mısınız?</p><br/>
</body>
</html>