overflowDışındaki sınırların sonları o içeriğin ne olacağı mülkiyet kontrolleri: hayal divaçıkça geniş 200px olarak ayarlandı, ancak geniş 300px olan bir görüntü içeriyor ettik ki. Bu görüntü div'in dışında kalacak ve visiblevarsayılan olarak olacaktır. Oysa overflowdeğeri olarak ayarlarsanız, hiddengörüntü 200 pikselde kesilecektir.
div ( overflow: visible | hidden | scroll | auto | inherit )Değerler
visible: içerik, kutusunun dışına çıktığında kırpılmaz. Bu, mülkün varsayılan değeridirhidden: taşan içerik gizlenecek.scroll: gizliye benzer, ancak kullanıcılar gizli içerikte gezinebilirauto: içerik, kutusunun dışında ilerlerse, bu durumda içerik gizlenirken, kullanıcıların içeriğin geri kalanını okuyabilmesi için bir kaydırma çubuğu görünmelidir.initial: olan varsayılan değeri kullanırvisibleinherit: taşmayı üst öğesinin değerine ayarlar.
Metnin bir öğenin sonunda doğal olarak sarılacağını (beyaz boşluk değiştirilmediği sürece), bu nedenle metnin nadiren taşmaya neden olacağını unutmayın. Bir yükseklik ayarlanmadıkça, metin sadece bir öğeyi daha uzun itecektir. Açık genişlikler ve yükseklikler ayarlandığında taşma daha yaygın olarak devreye girer ve herhangi bir içeriğin taşması veya kaydırmadan açıkça kaçınılması istenmez.
Gözle görülür
Taşma özelliğini hiç ayarlamazsanız, varsayılan görünürdür. Dolayısıyla, genel olarak, başka bir yerde ayarlanmasını geçersiz kılmadığınız sürece, bu özelliği açıkça görünür olarak ayarlamak için bir neden yoktur.
Burada unutulmaması gereken önemli nokta, içerik kutunun dışında görünse de, bu içeriğin sayfanın akışını etkilememesidir. Örneğin:
Genel olarak, zaten içinde web metni bulunan kutularda statik yükseklikler ayarlamamalısınız, bu yüzden ortaya çıkmamalıdır.
Gizli
Varsayılan görünenin tersi gizlidir . Bu, kutunun ötesine geçen herhangi bir içeriği tam anlamıyla gizler.
Bu, özellikle dinamik içerik ve ciddi düzen sorunlarına neden olan bir taşma olasılığı ile kullanımda yararlıdır. Ancak, bu şekilde gizlenen içeriğin tamamen erişilemez olduğunu unutmayın (kaynağı görüntülemekten daha az). Örneğin, bir kullanıcının varsayılan yazı tipi boyutu beklediğinizden daha büyük ayarlanmışsa, metni bir kutunun dışına itiyor ve tamamen kendi görünümünden saklıyor olabilirsiniz.
Kaydırma
Kaydırmak için bir kutunun taşma değerini ayarlamak, içeriğin kutunun dışında oluşturulmasını gizler, ancak içeriği görüntülemek için kutunun içini kaydırmak için kaydırma çubukları sunar.
Bu değerle ilgili not, içerik yalnızca birini veya diğerini gerektirse bile, ne olursa olsun, hem yatay hem de dikey kaydırma çubukları elde etmenizdir.
iOS'un momentum kaydırma özelliği ile bu değer için etkinleştirilebilir -webkit-overflow-scrolling.
Not: OS X Lion'da, kaydırma çubukları yalnızca kullanıldıklarında gösterilecek şekilde ayarlandığında , yalnızca gerekli kaydırma çubuklarının görüneceği şekilde scrolldaha çok davranır auto.
Oto
Otomatik taşma, kaydırma değerine çok benzer, yalnızca ihtiyacınız olmadığında kaydırma çubuğu alma sorununu çözer. Kaydırma çubukları yalnızca öğeden gerçekten kopan içerik varsa görünecektir.
overflow-x ve overflow-y
Ayrıca overflow-xve overflow-yözellikleriyle içeriğin taşmasını yatay veya dikey olarak değiştirmek de mümkündür . Örneğin, aşağıdaki demoda yatay taşma, kutunun yüksekliğinin ötesine uzanan metin gizlenirken kaydırılabilir:
.box ( overflow-y: hidden; overflow-x: scroll; )Şamandıra Takas
Tuhaf bir şekilde, taşma ayarının daha popüler kullanımlarından biri şamandıra temizliğidir. Taşma ayarının ayarlanması, elemandaki kayan noktayı temizlemez, kendi kendini temizler. Bu, taşma özelliğine sahip öğenin (hariç herhangi bir değer visible), yüksekliğin bildirilmediği varsayılarak, yüzen alt öğeleri (daraltma yerine) kapsaması gerektiği kadar genişleyeceği anlamına gelir . Böyle:
Taşma özelliğini ihtiyaç duymadığınız bir şekilde değiştirmenizi gerektirmediğinden daha iyi bir şamandıra temizleme tekniği clearfix'tir.
Blok biçimlendirme bağlamı oluşturma
overflowBir blok elemanını kayan bir elemanın yanına hizalamak istiyorsak yararlı olan yeni bir blok biçimlendirme bağlamı yaratacağını not etmek ilginçtir . Aşağıdaki örnekte, varsayılan olarak bir dizi paragrafın kayan bir resimle nasıl etkileşime gireceğini gösteriyoruz ve ardından overflow: hiddenmetni kendi kutusu içinde hizalamak için kullanıyoruz :
Bu, Nicole Sullivan'ın medya nesnesine ilham vermeye devam eden harika bir gönderisinden geliyor.
Kaydırma çubukları CSS ile şekillendirilebilir mi?
Eskiden IE'de (v5.5?) Kaydırma çubuklarına stil uygulayabiliyordunuz, ancak daha fazlasını yapamazsınız. WebKit tarayıcılarında şimdi yeniden biçimlendirebilirsiniz. Tarayıcılar arası özel kaydırma çubuklarına ihtiyacınız varsa, JavaScript'e bakın.
Bir öğeye taşma değerini dikkate almak için kaydırma çubuklarının eklenmesi gerekiyorsa, Firefox bunları öğenin dışına koyar ve görünür genişliği / yüksekliği belirtildiği gibi korur. IE, toplam genişliği / yüksekliği beyan edildiği gibi koruyarak kaydırma çubuklarını içeri koyar.
Demo
Bu örnek sayfadan alınan bu makale için demolar.
Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
İlişkili
- Float özelliği
Daha fazla bilgi
- Humble Clearfix'i Anlamak
- Taşma: gizli bir fayda
- MDN'de taşma
- W3C'de taşma
- İstenmeyen vücut taşmasını bulma / düzeltme