css word-wrap, Html elementi içine sığmayan kelimelerin satırda kırılma özelliklerini belirlemek için kullanılırız. Bazı uzun kelimelerin bulundukları alana sığmadıklarında sığmayan harflerinin alt satıra geçip geçmeyeceği ayarları yapmak için kullandığımız özelliktir.
Aldığı parametreler:
normal : Normal. Kelime kırılmaz.
break-word : Kelime sığmadığı yerden kırılması için kullanırız.
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
width: 100px;
margin-bottom: 10px;
border: 1px solid grey;
}
.one { word-wrap: normal; }
.two { word-wrap: break-word; }
</style>
<body>
<div class="one">
TasarımveYazılım
</div>
<div class="two">
TasarımveYazılım
</div>
</body>
</html>
Html Çıktısı:
Başka bir yazımızda görüşmek üzere…
