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