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>
1 Yorum
zinzinzibidi
Güzel paylaşım