Css ile 3 Nokta Kullanımı
Merhaba Arkadaşlar,
Bu makalede css ile geniş yazıları sınırlandırma işleminin nasıl yapıldığını göreceğiz. Tasarımlar içerisinde tek satır olarak belirlenen yazılar bazı durumlarda bir kaç harf veya bir kaç kelime daha da artarak 2,3 satıra kadar uzayabiliyor. Bu şekilde bir durum ile karşılaştığımızda tasarımın genel yapısının bozulmaması için belli bir noktadan sonra yazının geri kalanını görünmez yapmamız gerekmektedir. Bunun için çeşitli yöntemler tabii ki vardır ama tasarımsal açıdan da güzel duran işlem yazının devamının da bulunduğunu belirtecek şekilde 3 nokta eklemektir.
Uygulamamızı yapmak için bir html sayfa oluşturuyoruz ve ilk kod blogunu şu şekilde veriyoruz :
<!DOCTYPE html> <html> <head> <title>BilgiSayaci.Org - Css ile 3 Nokta Kullanımı</title> </head> <body> </body> </html>
Daha sonra class değeri “deneme” bir div oluşturarak içerisine “Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat laoreet augue.” yazısını ekleyin. Sayfayı çalıştırdığımızda yazı büyüklüklerine göre farklılık gösterecek şekilde deneme div’inin ortalama 500px genişliğinde bir alanı kapladığını göreceğiz. Şimdi yazının kaplaması gereken alanın maksimum 200px olacağını düşünerek css kodlarımızı ekliyoruz. Son hali şu şekilde olacaktır:
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org - Css ile 3 Nokta Kullanımı</title>
<style type="text/css">
.deneme{width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
</style>
</head>
<body>
<div class="deneme">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat laoreet augue.</div>
</body>
</html>
Sayfamızı bu şekilde düzenledikten sonra çalıştırdığımızda 200px’in dışına çıkan yazıların görünmediğini ve 3 nokta ile sonlandırıldığını göreceğiz. Yazdığımız css kodlarını incelersek;
1-) Width değeri ile yazının aslında kaplaması gereken maksimum alanı belirledik.
2-) Overflow değeri ile belirtilen maksimum genişliğin dışında kalacak olan yazının görüntülenmemesini sağladık.
3-) White-space değeri ile normalde genişliği aşan yazıların alt satıra inme durumunu ortadan kaldırmak için etki ettiği alanda hiç bir yazının alt satıra inmemesi gerektiğinin komut verdik.
4-) Text-overflow ile yazı eğer genişlik değerinden fazla ise sınırlandırma işleminin 3 nokta ile yapılması gerektiğini yazdık.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 57 No ‘lu Maddeden İndirebilirsiniz..
WordPresste bu içeriği kullanabilir miyiz?
@Uydunet,
Panelden direkt olarak kullanamazsın ama css tarafında ilgili alan için ekleme yapılmış ise kullanabilirsin.