css white-space, Html elementi içerisinde bulunan metin boşluklarının davranışlarını belirlemek kullanılır.
Aldığı parametreler:
normal : Html elementi içerisinde bulunan satır ve metin boşluklarını tek bir karakter boşluk olarak tanımlar. (Varsayılan)
nowrap : Html elementi içerisinde bulunan satır ve metin boşluklarını tek bir karakter boşluk olarak tanımlar ve metin sığmasa bile alt satıra geçmez.
pre : Html elementi içerisinde bulunan satır ve metin boşluklarını korur ve metin sığmasa bile alt satıra geçmez.
pre-line : Html elementi içerisinde bulunan satır boşluklarını korur ve metin boşluklarını tek bir karakter boşluk olarak tanımlar.
pre-wrap : Html elementi içerisinde bulunan satır ve metin boşluklarını korur.
length : Uzunluk Değeri.
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: 200px;
height: 100px;
border: 1px solid rgb(196, 196, 196);
}
.one { white-space: normal; }
.two { white-space:nowrap; }
.three { white-space: pre; }
.four { white-space: pre-line; }
.five { white-space:pre-wrap; }
</style>
<body>
<div class="one">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="two">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<div class="three">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<div class="four">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="five">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
</body>
</html>
Html çıktısı :
Örnekte görüldüğü gibi css white-space özelliği sayesesinde yazıların içerisinde bulunan boşlukları istediğimiz gibi kontrol edebiliyoruz.

Başka bir yazımızda görüşmek üzere…