Css’de geniş yazıyı üç nokta ile sınırlandırmak

Bazı durumlarda gelen verinin uzunluğu bilinmediği için css ile belli bir genişlik verip taşan kısımları üç nokta koyarak kısaltmamız gerekiyor. Bu gibi durumlar için css’de text-oveflow özelliğini kullanıyoruz. ellipsis değeri bize bu görevi sağlıyor. Ancak taşanların gizlenmesi için ve yazının hiçbir zaman 2. satıra inmemesi için oveflow ve white-spcae özellikleri de bize lazım. Örnek vermek gerekirse;

<div>test et bakalım ne kadar uzun bir yazı..</div>

Bunu kısaltmak istediğimde yapmam gereken;

div {
    width: 60px;
    overflow: hidden; /* taşanları gizle */
    white-space: nowrap; /* alt satıra hiç inme */
    text-overflow: ellipsis; /* eğer uzunsa üç nokta koy */
}

Ben SCSS ve LESS içinde sizlere mixinlerimi paylaşayım, kullanmak isteyenler için daha kolaylık olur.

SCSS dotdotdot Mixin

@mixin dotdotdot($width, $display: block){
  width: $width;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: $display;
}

Kullanımı;

div {
    @include dotdotdot(60px);
}

LESS dotdotdot Mixin

.dotdotdot(@width, @display: block){
  width: @width;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: @display;
}

Kullanımı;

div {
    .dotdotdot(60px);
}

İşte bu kadar, kolay gelsin ????