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