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>