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 */
}

See the Pen ypHgc by Tayfun Erbilen (@tayfunerbilen) on CodePen.

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);
}

See the Pen SCSS dotdotdot mixin by Tayfun Erbilen (@tayfunerbilen) on CodePen.

LESS dotdotdot Mixin

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

Kullanımı;

div {
    .dotdotdot(60px);
}

See the Pen LESS dotdotdot Mixin by Tayfun Erbilen (@tayfunerbilen) on CodePen.

İşte bu kadar, kolay gelsin 🙂

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“Css’de geniş yazıyı üç nokta ile sınırlandırmak” üzerine 16 yorum

  1. hocam gösterdiğiniz şekilde css ile üç nokta ekleyerek yazıyı bölüyorum ama bazı yerlerde kelimeyi de bölüyor. kelimeyi bölmeden sadece cümleyi belirttiğimiz ölçüde bölmemiz mümkünmü? teşekkür ederim…

  2. hocam kusura bakmayın, biraz takıntılıyım, bir şeyi öğrenmek istediğim zaman başım ağrıyana kadar araştırma yaparım. yanlış anlaşılmasın, size güvenmediğimden değil, siz hocamsınız, ama şurada (https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) konu ile alakalı olduğunu düşündüğüm bir yazı buldum. ingilizcem şimdilik iyi olmadığından anlayamadım. müsait bir zaman da inceleyebilirseniz sevinirim.

    1. Gönderdiğiniz linki inceledim.
      Burada da yine aynı şekilde 5 farklı kullanım sunmuş.
      Hiçbirisi kelimeden kesmekle ilgili değil ne yazık ki. Sadece sonraki üç noktayı değiştirme şansı olduğunu göstermiş.

  3. @Uğur ;
    http://jsfiddle.net/bex5o6wc/
    bu şekilde kullanbilirsin. veya :active ile Fare tıklama işleminde gerçekleştirebilirsin kalıcı olmasını istiyorsan veya toggle uygulamak istiyorsan JS’den destek alman gerekir.

    Tarayıcı uyumlul IE için 8 de desteklenmeye başlamış. Sıyah arkaplanla belirtilmiş kısımda ise TÜM tarayıcılrın desteklemeye başladığı versiyonlar ortak destek gibi

Bir Cevap Yazın

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