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>