Bildiğiniz gibi, CSS ellipsis özelliği ile tek satırlık metinleri, uzunluğuna göre üç nokta ile kesebilmek mümkün. Peki, iki satırlık bir metni üç nokta ile kesmek istersek? İşte, bu da mümkün. Bu şekilde, sitenizdeki örneğin başlıkları iki satırdan sonra, ellipsis gibi üç nokta ile sorunsuz bir şekilde kesebilmektesiniz. Bunun için ise, aşağıdaki örnek işlemi gerçekleştirmeniz yeterli olacaktır.

AYRICA: CSS'de Animasyon (animation) Kaldırma Nasıl Yapılır?

CSS ile İki Satırlık Metinleri Üç Nokta ile Keselim

1) CSS örnek kodlarımız aşağıdaki gibi olacaktır.

.css-iki-satir {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

2) HTML örnek kodumuz ise aşağıdaki gibidir.

<div class="css-iki-satir">Buraya iki satırlık metin gelecek olup, akabinde otomatik olarak üç nokta ile kesilecektir.</div>

Not: Yukarıdaki kırmızı alanı, kendinize göre değiştirmeyi unutmayın. İlgili işlemi otomatize etmek istiyorsanız, örneğin yazı başlıklarınızda v.b. İlgili div içerisine yukarıdaki CSS kodlarını eklemeniz yeterli olacaktır.