HTML sayfalardaki uzun metinler kullanıcılar için göz yorucu veya korkutucu görülebilir. Kullanıcı deneyimini artırmak için böylesi durumlarda metni kısaltma yoluna başvurulur. Eğer metnin geri kalan kısmı önemliyse, JavaScript ile kısaltılan metnin sonuna bir tıklanabilir bir öge oluşturularak geri kalan kısmının görünmesi sağlanabilir.
Bağlantılar, yani <a> ögesiyle işaretlenen tıklanabilir metinler kısaltılmayı en çok gerektiren yapılardır. Bazı bağlantılar gereğinden uzundur ve söz dizimi bakımından okunması gereksizdir. Çünkü bir URL yapısında kullanıcının işine yarabilecek -geliştiriciler hariç- hiçbir şey bulunmamaktadır. İşlevini kaybetmediği sürece, bir URL’nin kısaltılması kullanıcı deneyimi açısından son derece faydalıdır.
Twitter’da karakter sınırının olduğu zamanlarda, geliştirici ekibinin en büyük sorunlarından biri tweetin içerisine yerleştirilen bağlantıların uzunluğuydu. Bu bağlantıları kısaltmak için çoğu kullanıcı Bitly, Short URL gibi üçüncül taraf hizmetler kullanıyordu. Sayfayı ziyaret etmek, bağlantıyı yapıştırıp kısaltmak ve kısa bağlantıyı alıp tekrar tweete geri dönerek yapıştırmak elbette kullanıcı deneyimi açısından problemliydi ve zaman kaybıydı. Twitter, bir süre daha kullanıcıların bu türden üçüncül taraf hizmetlere başvurmasında sorun görmedi. Ancak problemin büyüdüğünü fark edince gerekli adımları attı.
CSS ile metin kısaltma ve üç nokta
CSS ile uzun bir metni kısaltma işlemine “truncate” adı verilir. Bir metni kısaltabilmeniz için öncelikle HTML ögesini seçmeniz gerekir. Çoğunlukla kısaltılan metinler <p>, <h2> veya <a> ögeleri olur. Aşağıdaki kod örneği, kısaltılmış uzun bir metnin örneğidir:
See the Pen CSS truncate by Muhammet Gülhan (@muhammet-g-lhan) on CodePen.
CSS koduna dikkat ederseniz, <h2>’nin öncelikle block olarak gösterildiğini, akışın (overflow) gizlendiğini, metin akışının (text-overflow) ise ellipsis, yani üç nokta olarak gösterildiğini görüyoruz.
- Not: Eğer bir html ögesi yerine CSS sınıfı seçerseniz muhtemelen bu kod işinize yaramayacaktır. Genişlik değerleri metne değil, tüm sınıfı kapsayıcı ögelere uygulanacaktır.
Kısalttığım kısmı düğme kullanarak nasıl gösterebilirim?
Kısalttığınız kısım önemliyse ve kullanıcılara bir seçenek olarak sunmak istiyorsanız metni bir container’a (grup) alabilir ve ardından bir düğme ekleyebilirsiniz.
<div class="truncate-container">
<h2>
I want to truncate this title with CSS.
</h2>
<button class="show-more">Show more</button>
</div>
<div class="truncate-container">
<a href="https://gulhansozluk.com/json/">What JSON is used for?</a>
<button class="show-more">Show more</button>
</div>
Ardından CSS kodunuzu aşağıdaki gibi düzenleyin:
<div class="truncate-container">
<h2>
I want to truncate this title with CSS.
</h2>
<button class="show-more">Show more</button>
</div>
<div class="truncate-container">
<a href="https://gulhansozluk.com/json/">What JSON is used for?</a>
<button class="show-more">Show more</button>
</div>
“Daha fazlasını göster” düğmesinin tıklandığında tam metni göstermesini sağlamak için biraz JavaScript eklemeniz gerekir. Bunun için de aşağıdaki kodu <script> olarak kullanabilirsiniz.
