Web sitemizi hazırlarken css düzenlemeleri yapmak durumunda kalıyoruz. Birçok CSS düzenlemesi yaptığımız tasarımlarda hayatımızı kurtaran noktaların başında geliyor. Temel CSS kodları ile arka planın rengini değiştirebiliyor veya farklı işlemler gerçekleştirerek yazılarımın renklerini div tarzlarımızı CSS kullanarak şekillendirebiliyoruz. CSS Yazının sonuna üç nokta koymak gibi bir işlevi de bize sunmakta. Birçok farklı işlevi kullanarak bu işlemi rahatlıkla gerçekleştirebiliriz.
CSS Uzun Yazıların Sonuna Üç Nokta Koymak
Bu CSS kodlarını nerede kullanırız diye örneklendirmek gerekirse bloglarımızı gösterdiğimiz anasayfamızda fazlasıyla uzun olan başlıklarımızı birçok satır yapmak yerine tek satıra düşürmek istediğimizde bu kod blokları bizim işimizi kolaylaştıracaktık. Yazımızın açıklama kısımlarını birden fazla satır değilde tek satırda çözümlemek istediğimizde CSS bize bu konuda yardımcı olacaktır.
Uzun yazıların sonuna üç nokta koyarak merak uyandırıcı bir hale getirebilir ve devamı var izlenimi uyandırabiliriz. Uygulanması gereken alan bazen bir p etiketi bazen direkt bir div olabilir. Bu durum tamamen hazırlamış olduğunuz tasarımın detaylarına göre değişiklik gösterebilmektedir. Uygulamanız gerektiği yer sizin tasarımınıza uygun olabilecek herhangi bir HTML etiketi olacaktır.
Ben bu örnekte daha da açıklayıcı olabilmek adına html div etiketi üzerinden örnek vereceğim. Siz bu örnekten yola çıkarak birçok HTML etiketinde bu senaryonun benzerini oluşturabilirsiniz.
<div>Burası uzun bir yazı alanıdır.</div>
Div etiketi içerisine göstermek istediğim alandan daha uzun bir metin içeriği olduğunu görüyoruz. Div genişliğinden fazla olduğu için içeriğim 2.satıra düşmektedir. Bu durumdan kurtulmak ve mevcut tasarımımı korumak adına aşağıdaki CSS kod bloğunu kullanmam gerekmektedir.
div {
width: 60px;
overflow: hidden; /* uzunluktan taşanları gizle */
white-space: nowrap; /* yazıyı alt satır indirme */
text-overflow: ellipsis; /* css yazının sonuna üç nokta koymak üç nokta koyacak */
} Bu örnekte sayfamda tek bir div olduğunu varsayıyoruz. Bu senaryoda divimin tasarımıma göre olması gereken genişliği 60px olarak sınırlandırıldı. Fazla içeriğin taşmaması adına css yazının sonuna üç nokta koymak durumundan faydalanarak ilgili geliştirmeyi yapmamız gerekiyor.
white-space:nowrap; diyerek ilgili alandaki içeriğimizin alt satıra hiç inmemesini istiyoruz. En önemli ve asıl amacımız olan durumu ise bize ellipsis kodu sağlamaktadır. Bunun yerine farklı varyasyonlarda deneyebilirsiniz. text-overflow:ellipsis; diyerek ilgili alanda bulunan yazımız uzunsa üç nokta koy diyerek ilgili işlemimizi gerçekleştiriyoruz. Tüm taşan yerler için overflow:hidden; yapmakta en önemli detaylardan bir tanesidir.
Wordpress site kurmak ve web tasarım fiyatları için ilgili sayfalarımı ziyaret edebilirsiniz.
