İçeriklerimizde veya içerik başlıklarımızda bazen zorunluluktan veya kendi isteğimiz ile metinlerin sonuna üç nokta koyabiliriz. Yazılımcı arkadaşlar kullandıkları programlama dili ile bu işlemi çözebilir veya bazı durumlarda CSS kullanarak bu durumu çözümleyebiliriz.

Günümüzde daha da güçlenmiş olarak var olan CSS3 ile yapabileceklerimizi daha fazla şekillendirebiliriz. CSS3 tarayıcı tarafından okunduğu için açılış olarak sunucunuzdan bir geri dönüş beklemeden yayınlanacaktır. Bu işlemi php, .net vb. programlama dili kullanarak yaptığınızda yazdığınız kodun çözümlenmesi için sunucu ile işlem gerçekleşecektir.

Biz bu yazımızda içerik bulunan alanlarda kullanılmak üzere CSS ile sorunumuzu çözümleyeceğiz.

Bir HTML element içerisindeki metinlerin beyaz boşluklarının nasıl görüneceğini CSS white-space özelliği ile ayarlıyoruz.

white-space özelliğinin aldığı değerler:

  • normal (varsayılan)
  • nowrap
  • pre
  • pre-wrap
  • pre-line

CSS overflow özelliği değerleri

  • Visible :Varsayılan değer. İçerik kırpılmamış;
  • hidden :Eleman kutusundan taşan içerik kırpılır ve içeriğin geri kalan kısmı görünmez olur.
  • scroll :Taşan içerik tıpkı gizli gibi kırpılır, ancak taşan içeriğe erişmek için kaydırma mekanizması sağlar.
  • auto :İçerik divin kutusundan taşıyorsa, içeriği geri kalanını görmek için kaydırma çubuklarını otomatik olarak sağlar, aksi takdirde kaydırma çubuğu görünmez.
  • initial :Özelliğin varsayılan değeridir.
  • inherit :Bu özellik, üst öğeden devralır.

text-overflow özelliği değerleri

Varsayılan değeri clip’dir. Clip değeri alan satır içi eleman kapsayıcı eleman sınırlarından kesilecektir. İkinci aldığı değer ellipsis’dir. ellipsis değeri alan eleman clip gibi davranacaktır ancak farklı olarak sonuna üç nokta(…) koyacaktır




Yukarıda ki bilgiler doğrultusunda HTML tag’ı olan H başlıklarımıza veya div id, classlarımıza vermemiz gereken kod bloğu aşağıda ki gibi olacaktır.

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Bir cevap yazın

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