<h4>Standart yazı</h4>
<div class="standart">
  CSS ile Yazı Boyutunu Sınırlamak (Ellipsis), üç nokta ile kesmek
</div>
<h4>text-overflow: clip;</h4>
<div class="hidden">
  CSS ile Yazı Boyutunu Sınırlamak (Ellipsis), üç nokta ile kesmek
</div>
<h4>text-overflow:ellipsis;</h4>
<div class="ellipsis">
  CSS ile Yazı Boyutunu Sınırlamak (Ellipsis), üç nokta ile kesmek
</div>
<h4>text-overflow:' *...*';</h4>
<div class="custom">
  CSS ile Yazı Boyutunu Sınırlamak (Ellipsis), üç nokta ile kesmek
</div>
div{
  width:150px;
  border:1px solid #555;
  padding:5px;
}
.hidden{
  white-space: nowrap; /* Yazıyı tek satırla sınırlandırıyoruz */
  overflow:hidden; /* Verilen genişlikten (150px) artanı gizlemesini istiyoruz */
  text-overflow:clip; /* Yazının kesilmesini sağlıyor */
}
.ellipsis{
  overflow:hidden; /* Verilen genişlikten (150px) artanı gizlemesini istiyoruz */
  white-space: nowrap; /* Yazıyı tek satırla sınırlandırıyoruz */
  text-overflow:ellipsis; /* Yazının kesildiği yerden üç nokta vermesini sağlıyoruz*/
}
.custom{
  overflow:hidden; /* Verilen genişlikten (150px) artanı gizlemesini istiyoruz */
  white-space: nowrap; /* Yazıyı tek satırla sınırlandırıyoruz */
  text-overflow:' *...*'; /* Yazının kesildiği yere sizin belirttiğiniz karakterleri yerleştirir */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.