Bu makale, içeriğin taşmasını durdurma ve CSS kullanarak kaydırmayı etkinleştirme yöntemini gösterir.
İçeriğin Taşmasını Durdurma ve Kaydırma Nasıl Etkinleştirilir?
İçeriğin taşmasını engellemenin amacı, içeriğin kapsayıcısına sığması ve web sitesinin performansını olumsuz etkilememesidir. Bağlamı kolayca anlayabilir ve kullanıcıların erişimini artırabilir. Ayrıntılı bir açıklama için bir örnek üzerinden tartışalım:
1. Adım: İçerik Taşması ile Kaydırmayı Etkinleştirin
Başlangıçta, kaydırma efektinin uygulanacağı HTML dosyası içinde bir tablo oluşturarak başlayın. Diyelim ki tablo zaten oluşturulmuş ve altı satır ve yedi sütundan oluşuyor ve tabloya bazı kukla veriler sağlanmış:
< masa >
< tr >
< inci > kafa 1 < / inci >
< inci > kafa 2 < / inci >
< inci > Kafa 3 < / inci >
< inci > kafa 4 < / inci >
< inci > Kafa 5 < / inci >
< inci > kafa 6 < / inci >
< inci > Kafa 7 < / inci >
< / tr >
< tr >
< td > 1. sıra < / td >
< td > 1. sıra < / td >
< td > 1. sıra < / td >
< td > 1. sıra < / td >
< td > 1. sıra < / td >
< td > 1. sıra < / td >
< td > 1. sıra < / td >
< / tr >
< tr >
< td > 2. sıra < / td >
< td > 2. sıra < / td >
< td > 2. sıra < / td >
< td > 2. sıra < / td >
< td > 2. sıra < / td >
< td > 2. sıra < / td >
< td > 2. sıra < / td >
< / tr >
< tr >
< td > 3. sıra < / td >
< td > 3. sıra < / td >
< td > 3. sıra < / td >
< td > 3. sıra < / td >
< td > 3. sıra < / td >
< td > 3. sıra < / td >
< td > 3. sıra < / td >
< / tr >
< tr >
< td > 4. sıra < / td >
< td > 4. sıra < / td >
< td > 4. sıra < / td >
< td > 4. sıra < / td >
< td > 4. sıra < / td >
< td > 4. sıra < / td >
< td > 4. sıra < / td >
< / tr >< tr >
< td > 5. sıra < / td >
< td > 5. sıra < / td >
< td > 5. sıra < / td >
< td > 5. sıra < / td >
< td > 5. sıra < / td >
< td > 5. sıra < / td >
< td > 5. sıra < / td >
< / tr >
< tr >
< td > 6. sıra < / td >
< td > 6. sıra < / td >
< td > 6. sıra < / td >
< td > 6. sıra < / td >
< td > 6. sıra < / td >
< td > 6. sıra < / td >
< td > 6. sıra < / td >
< / tr >
< / masa >
Yukarıdaki kod parçacığının yürütülmesinden sonra, web sayfası şöyle görünür:
Çıktı, tablo verilerinin daha az okunabilir bir biçimde olduğunu ve tablo tarafından çok fazla alan kullanıldığını gösterir.
2. Adım: Taşma ve Kaydırma Efektini Ayarlama Yukarıdaki kod parçacığında: Yukarıdaki kod parçacığının yürütülmesinden sonra, web sayfası şöyle görünür: Web sayfası, tablonun artık daha az yer kapladığını ve içeriğin taşmasını engellediğini gösteriyor. Ayrıca kaydırma efekti etkinleştirildi. Not : Ayarlayarak ' taşma: otomatik ' veya ' taşma: kaydırma ”, kullanıcılar taşan içerik için kaydırmayı etkinleştirebilir. Ek olarak ' taşma: gizli ” taşmayı tamamen önlemek için kullanılabilir. Taşmayı kontrol etmek ve yatay ve dikey eksende kaydırmayı etkinleştirmek için “overflow-x” ve “overflow-y” özellikleri kullanılır. İçeriğin taşmasını önler ve tüm cihazlar için etkileşimli, duyarlı bir tasarım oluşturmak için kaydırmayı etkinleştirir. Bu makale, CSS kullanarak içeriğin taşmasının nasıl durdurulacağını ve kaydırmanın nasıl etkinleştirileceğini göstermiştir.
Bundan sonra, tabloyu bir ebeveyn ile sarın '
.taşma {
Genişlik : 200 piksel ;
yükseklik : 200 piksel ;
taşma-x : Oto ;
taşma-y : Oto ;
kaydırma davranışı : düz ;
}
Çözüm