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 :)

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

You May Also Like
davutabi.com css acilir arama kutusu
Daha Fazla

CSS3 ile Açılır Arama Kutusu

Merhaba arkadaşlar. Bu yazımda “CSS3‘ün çoklu hover desteği ve transition özelliğiyle nasıl ilgi çekici arama kutucukları hazırlanır?” sorusunu cevaplandıracağız.…
davutabi.com cssde important tanimi
Daha Fazla

Css’de !important Tanımı

!important’ı anlamak için CSS etkinliğine bir göz atmalısınız. CSS’de etkinlik tanımını tekrar hatırlatalım; CSS’de etkinliğin anlamı stil çatışması(aynı…