<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 */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.