Html & Css Uzun yazıları üç noktayla sınırlandırmak

Bazen sitemizde paylaştığımız bir makalenin yada bir yazının bir dive sığmasını ve sığmayan kısmında üç noktayla sınırlandırılmasını isteriz, bu makalemizde sığmayan yazı sonuna html&css kullanarak nasıl üç nokta ekleyebileceğimizi göreceğiz.

Html kodumuz

Css Kodumuz

Üç noktayla sonlandırmak için gerekli kodumuz text-overflow: ellipsis; kodudur.

Yukarıda yaptığımız işlemler sırasıyla

  1. text classına sahip bir div oluşturduk
  2. css dosyamızda 350px genişlik verdik divimize
  3. overflow:hidden; diyerek taşan kısımları gizledik
  4. text-overflow: ellipsis; koduyla metnin sonuna üç nokta ekledik

Canlı örneği aşağıda görebilirsiniz.

See the Pen RPMxZo by Uğur (@ugurturkmen) on CodePen.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir