Css Uzun Metinleri Üç Nokta ile Durdurmak
Css

Css Uzun Metinleri Üç Nokta ile Durdurmak

Merhaba arkadaşlar. Bugünkü konumuz başlıkta yazıldığı üzere uzun metinleri üç nokta ile durdurmaktır. Öncelikle bu işlemi yapmak için kullanacağımız css elemanlarını inceleyeceğiz. Overflow, white-space ve text-overflow elemanlarının aldığı değerleri inceleyelim.
Overflow Aldığı Değerler :
Visible : Metin sığmaz ise nesnenin dışına taşabilir.
Scroll : Metin sığmaz ise kaydırma çubukları çıkar.
Hidden : Metin sığmaz ise dışarı çıkan metni gizler.
Auto : Adından da anlaşılacağı üzere otomatik olarak bu değeri alır. Metin taşar ise kaydırma çubuğu çıkartır.
White-Space Aldığı Değerler :
Normal : Metinler arasında birden fazla boşluk bırakılsa bile boşlukları tek boşluk olarak algılar. Eğer tanımlama yapılmaz ise otomatik olarak bu değeri alır.
Pre : Metinler arasında birden fazla bırakılan boşlukları boşluk olarak sayar. Boşlukları kesinlikle birleştirmez.
Nowrap : Alt satıra geçişe izin vermez.
Text-Overflow Aldığı Değerler :
Clip : Otomatik aldığı değerdir. Nesne dışına taşmış metni göstermez.
Ellipsis : Nesne dışına taşmış metinleri bölerek sonuna üç nokta ekler.
Şimdi kodlarımıza geçme vaktidir. Öncelikle css kodlarımızı sonrasında html kodumuzu paylaşacağım.

#divimiz {
    width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
Son olarak body etiketleri arasına aşağıdaki html kodlarımızı yazıyoruz. Sonraki makalelerde görüşmek üzere...
<div id="divimiz">
Bu bizim deneme metnimiz olmakla birlikte şuan okuduğunuz kısmı maalesef web sayfasında okuyamacaksınız...
</div>


author

Aykut Erdoğan

Overflow, White-Space, Text-Overflow, Ellipsis

  • Bu Yazılara da Gözat:

    1 Yorum

    author

    Cevapla