CSS ve HTML Kullanarak Kayan Metin İçeren Bir Kutu Oluşturun

bir HTML kaydırma kutusu, kutu içeriği kutu boyutlarından daha büyük olduğunda, sağ ve alt tarafa kaydırma çubukları ekleyen bir kutudur. Diğer bir deyişle, yaklaşık 50 kelime sığabilecek bir kutunuz varsa ve 200 kelimelik bir metniniz varsa, bir HTML kaydırma kutusu, ilave 150 kelimeyi görmenizi sağlamak için kaydırma çubuklarını yukarı kaldıracaktır. Standart HTML'de bu, fazladan metni kutunun dışına iter.

HTML kaydırma yapmak oldukça kolaydır. Sadece genişliği ayarlamanız ve yükseklik kaydırmak istediğiniz öğenin ve ardından CSS kaydırmanın nasıl olmasını istediğinizi ayarlamak için taşma özelliği.

Ekstra Metin ile Ne Yapmalı?

Mizanpajınızdaki alana sığacak olandan daha fazla metniniz olduğunda, birkaç seçeneğiniz vardır:

• Metni daha kısa ve sığacak şekilde yeniden yazın.
• Metnin sınırların ötesine geçmesine izin verin ve mizanpajın onu desteklemek için esnemesini umalım.
• Metni taştığı yerde kesin.
• Boşluğun fazladan metni gösterecek şekilde kaydırılması için kaydırma çubukları (genellikle metin için dikey) ekleyin.

En iyi seçenek genellikle son seçenektir: kayan bir metin kutusu oluşturun. Ardından fazladan metin hala okunabilir, ancak tasarımınız tehlikeye atılmaz.

Bunun için HTML ve CSS şöyle olacaktır:

buraya yaz... 

taşma: otomatik; tarayıcıya, metnin div'in sınırlarını aşmasını önlemek için gerekirse kaydırma çubukları eklemesini söyler. Ancak bunun çalışması için, taşacak sınırlar olması için div'de ayarlanan genişlik ve yükseklik stili özelliklerine de ihtiyacınız vardır.

Ayrıca taşmayı değiştirerek metni kesebilirsiniz: auto; için taşma: gizli; Taşma özelliğini dışarıda bırakırsanız, metin div sınırlarının dışına taşacaktır.

Metinden Fazlasına Kaydırma Çubukları Ekleyebilirsiniz

Daha küçük bir alanda görüntülemek istediğiniz büyük bir resminiz varsa, metinde yaptığınız gibi etrafına kaydırma çubukları ekleyebilirsiniz.

Bu örnekte, 400x509 görüntü 300x300 paragrafın içindedir.

Tablolar Kaydırma Çubuklarından Yararlanabilir

Uzun bilgi tablolarının çok hızlı okunması çok zor olabilir, ancak bunları sınırlı boyutta bir div içine koyarak ve ardından taşma özelliğini ekleyerek, üzerinde aşırı yer kaplamayan çok sayıda veri içeren tablolar oluşturabilirsiniz. sayfa.

En kolay yol, tıpkı resimler ve metinlerde olduğu gibidir, sadece tablonun etrafına bir div ekleyin, o div'in genişliğini ve yüksekliğini ayarlayın ve overflow özelliğini ekleyin:

... 

Bunu yaptığınızda meydana gelen bir şey, tarayıcı kaydırma çubuklarının kromunun tabloyla örtüştüğünü varsaydığı için genellikle yatay bir kaydırma çubuğu görünür. Bunu, tablonun genişliğini ve diğerlerini değiştirerek düzeltmenin birçok yolu vardır. Ancak bizim favorimiz, CSS 3 özelliğiyle yatay kaydırmayı kapatmaktır. taşma-x

Sadece ekle taşma-x: gizli; div'e ve bu yatay kaydırma çubuğunu kaldıracaktır. Kaybolan içerik olabileceğinden bunu test ettiğinizden emin olun.

Firefox, Taşma için TBODY Etiketlerinin Kullanılmasını Destekler

Firefox tarayıcısının gerçekten güzel bir özelliği, taşma özelliğini tbody ve thead veya tfoot gibi iç tablo etiketlerinde kullanabilmenizdir. Bu, tablo içeriğinde kaydırma çubukları ayarlayabileceğiniz ve başlık hücrelerinin bunların üzerinde sabit kalacağı anlamına gelir. Bu yalnızca Firefox'ta çalışır, bu çok kötüdür, ancak okuyucularınız yalnızca Firefox kullanıyorsa güzel bir özelliktir. Ne demek istediğimi görmek için Firefox'taki bu örneğe göz atın.

...AdıTelefonJennifer502-5366. 

...