<h4>İlk Yöntem</h4>
<div class="ilk_yol">
  CSS ile Yazı Boyutunu Sınırlamak (Ellipsis), üç nokta ile kesmekCSS ile Yazı Boyutunu Sınırlamak (Ellipsis), üç nokta ile kesmek CSS ile Yazı Boyutunu Sınırlamak (Ellipsis), üç nokta ile kesmek CSS ile Yazı Boyutunu (Ellipsis), üç nokta ile kesmek CSS ile Yazı Boyutunu Sınırlamak (Ellipsis), üç nokta ile kesmek
</div>
<h4>İkinci Yöntem</h4>
<div class="ikinci_yol">
  CSS ile Yazı Boyutunu Sınırlamak (Ellipsis), üç nokta ile kesmekCSS ile Yazı Boyutunu Sınırlamak (Ellipsis), üç nokta ile kesmek CSS ile Yazı Boyutunu Sınırlamak (Ellipsis), üç nokta ile kesmek CSS ile Yazı Boyutunu (Ellipsis), üç nokta ile kesmekCSS ile Yazı Boyutunu Sınırlamak (Ellipsis), üç nokta ile kesmek
</div>
div{
  margin-bottom:30px;
  max-width:400px;
}
/******/
.ilk_yol{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* kaç satırla sınırlayacağımızı yazıyoruz */
  -webkit-box-orient: vertical;
}
.ikinci_yol {
  position: relative;
  height: 59px; 
  max-width:400px;
  overflow:hidden;
  line-height:19px;
}
.ikinci_yol:after {
  content: "";
  text-align: right; /* sağa yaslıyoruz */
  position: absolute; /* absolute - bağımsız değerini veriyoruz */
  bottom: 0; /* aşağı yaslıyoruz */
  right: 0; /* sağa yaslıyoruz */
  width: 50%; /* genişliğin %50'sini alıyoruz */
  height: 1.2em; /* yüksekliği yazı boyutunuza göre değiştirin */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); /* soldan transparan bağlayarak sağa doğru beyazlaşan arkaplan*/
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.