css white-space nedir? Kullanımı?

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.

css white-space

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

Leave a Reply