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

<div class="text">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.</div>

Css Kodumuz

.text {
	width:350px;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space:nowrap;
}

Üç 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.