v2.1.1
Giriş yap

CSS text-transform Özelliği

CSS1

Harflerin büyük-küçük dönüşümünü sağlamak için bu özellik kullanılır.

Yapısı (Syntax)text-transform: uppercase | lowercase | capitalize;
Varsayılan Değer none
JavaScript Yapısı object.style.textTransform="uppercase"
Animasyon Özellikleri Uygulanabilir Hayır (Daha fazla detay)

Değerler

Değer Açıklama Versiyon
none Metin olduğu gibi gösterilir. Varsayılan değerdir. CSS1
capitalize Her kelimenin ilk harfini büyük harfe dönüştürür. CSS1
uppercase Tüm karakterleri büyük harfe dönüştürür. CSS1
lowercase Tüm karakterleri küçük harfe dönüştürür. CSS1

Örnekler

Her değer için bir örnek vermek gerekirse;

<div class="uppercase">küçük harflerle yazdık ama büyük görünecek</div>
<div class="lowercase">BÜYÜK HARFLERLE YAZDIK AMA KÜÇÜK GÖRÜNECEK</div>
<div class="capitalize">her kelimenin ilk harfi büyük görünecek</div>

<style>
.uppercase {
	text-transform: uppercase;
}
.lowercase {
	text-transform: lowercase;
}
.capitalize {
	text-transform: capitalize;
}
</style>

Büyük İ ve küçük ı gibi karakterlerde büyük harfe ve küçük harfe çevirirken problem yaşayabilirsiniz. Bunun çözümü etiketinize ya da html etiketinize lang="tr" değerini eklemek.

<div class="uppercase">istanbul</div>
<div class="uppercase" lang="tr">istanbul</div>

<div class="lowercase">İSTANBUL</div>
<div class="lowercase" lang="tr">İSTANBUL</div>

<div class="capitalize">istanbul büyük şehir belediyesi</div>

<style>
    .uppercase {
        text-transform: uppercase;
    }
    .lowercase {
        text-transform: lowercase;
    }
    /* ne yazık ki bu hiçbir şekilde desteklemiyor */
    .capitalize {
        text-transform: capitalize;
    }
</style>

tayfunerbilen
83 gün önce eklendi.
Github'da Düzenle
Önceki text-indent Sonraki word-spacing