Çalıştırılabilir CSS Dokümanları: CSS overflow

Q: overflow auto ile scroll arasındaki fark nedir?

scroll içerik sığsa bile her zaman kaydırma çubuklarına yer ayırır. auto ise yalnızca içerik kutudan büyük olduğunda bir kaydırma çubuğu gösterir; genellikle istediğin budur.

Q: Bir div nasıl kaydırılabilir yapılır?

Boyutunu sınırla ve kaydırmaya izin ver: max-height: 300px; overflow-y: auto;. Bir height ya da max-height sınırı olmadan div içeriğiyle büyür ve hiç taşmaz.

Q: overflow-x: hidden neden dikey bir kaydırma çubuğu da ekliyor?

Bir eksen hidden, scroll ya da auto ise diğer eksendeki visible değeri auto olarak hesaplanır. Bunun yerine bir kaydırma kapsayıcısı oluşturmayan ve diğer ekseni görünür bırakan overflow-x: clip kullan.

Q: Taşan metne üç nokta (...) nasıl eklenir?

Tek satır için genişliği sınırlı bir elemente: white-space: nowrap; overflow: hidden; text-overflow: ellipsis;. Birkaç satır için display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; kullan.

overflow ne yapar

İçerik kutusundan büyük olduğunda (sabit bir yükseklik, uzun bir kelime, geniş bir tablo) taşar. overflow özelliği fazlalığa ne olacağına karar verir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overflow values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
    .box {
      width: 150px; height: 50px; padding: 8px;
      border: 2px solid #2563eb; background: #eff6ff;
      margin-bottom: 60px;
    }
    .visible { overflow: visible; }
    .hidden { overflow: hidden; }
    .scroll { overflow: scroll; }
    .auto { overflow: auto; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box visible"><b>visible</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box hidden"><b>hidden</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box scroll"><b>scroll</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box auto"><b>auto</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
  </div>
</body>
</html>

Değer	Ne görürsün	Kaydırma kapsayıcısı
`visible` (varsayılan)	İçerik kutudan taşar ve ardından geleni örter	Hayır
`hidden`	Padding kenarında kırpılır, kaydırma çubuğu yok (script yine de kaydırabilir)	Evet
`clip`	Kırpılır ve script ile bile hiç kaydırılamaz	Hayır
`scroll`	İçerik sığsa bile her zaman kaydırma çubuklarını gösterir	Evet
`auto`	Yalnızca içerik sığmadığında kaydırma çubukları	Evet

macOS'ta ve telefonlarda kaydırma çubukları içeriğin üstünde durur ve kaybolur, bu yüzden kaydırana kadar scroll ve auto aynı görünebilir.

Kaydırılabilir bir kutu yapmak

Bir kutu yalnızca boyutunu bir şey sınırlıyorsa taşar. Bir height ya da max-height artı overflow-y: auto, uzun bir listeyi kayan bir panele çevirir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrollable list</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #d1d5db; border-radius: 8px;
    }
    .panel p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="panel" id="panel">
    <p>Message 1</p><p>Message 2</p><p>Message 3</p><p>Message 4</p>
    <p>Message 5</p><p>Message 6</p><p>Message 7</p><p>Message 8</p>
  </div>
</body>
</html>

Burada max-height, height'tan daha iyidir: kısa bir liste kısa kalır ve yalnızca uzun bir liste kayar. İçinde odaklanılabilir içerik olmayan kaydırılabilir bir bölge, klavye kullanıcıları da kaydırabilsin diye tabindex="0" almalıdır.

overflow-x ve overflow-y

İki eksen ayrı ayrı ayarlanabilir. Yaygın kullanım, bütün sayfayı genişletmek yerine kapsayıcısının içinde yana kayan geniş bir tablodur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal scroll</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .table-wrap { overflow-x: auto; border: 1px solid #d1d5db; max-width: 360px; }
    table { border-collapse: collapse; }
    th, td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="table-wrap" id="wrap">
    <table>
      <tr><th>Plan</th><th>Monthly</th><th>Yearly</th><th>Users</th><th>Storage</th><th>Support</th></tr>
      <tr><td>Free</td><td>$0</td><td>$0</td><td>1</td><td>1 GB</td><td>Community</td></tr>
      <tr><td>Team</td><td>$12</td><td>$120</td><td>10</td><td>100 GB</td><td>Email</td></tr>
    </table>
  </div>
</body>
</html>

Hatırlanacak bir kural: bir eksen hidden, scroll ya da auto ise diğer eksendeki visible değeri auto olur. Yani tek başına overflow-x: hidden sana beklenmedik bir dikey kaydırma çubuğu verebilir. overflow-x: clip bu etkiye sahip değildir:

.a { overflow-x: hidden; }  /* overflow-y computes to auto */
.b { overflow-x: clip; }    /* overflow-y stays visible */

Metni üç noktayla kesmek

text-overflow: ellipsis, bir satırın kırpılan sonunu "…" ile değiştirir. Üç şeye birlikte ihtiyaç duyar: sınırlı bir genişlik, kırılamayan metin ve gizli taşma:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ellipsis</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .one-line {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #d1d5db; padding: 6px;
    }
    .three-lines {
      width: 240px; margin-top: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      border: 1px solid #d1d5db; padding: 6px;
    }
  </style>
</head>
<body>
  <div class="one-line" id="one">A very long file name that will not fit in the box.pdf</div>
  <div class="three-lines" id="three">This paragraph is longer than three lines. Only the first three lines are shown and the end of the third one becomes an ellipsis, which suits card previews and search results.</div>
</body>
</html>

-webkit- önekli satır kırpma Chrome, Firefox ve Safari'de çalışır. Ekran okuyucular yine de metnin tamamını okur, bu yüzden kırpılan kelimeler onlar için kaybolmaz.

overflow'un yan etkileri

overflow'u visible ya da clip dışında herhangi bir değere ayarlamak kırpmaktan fazlasını değiştirir:

Float'ları ve çocuk margin'lerini içinde tutar. Element yeni bir block formatting context oluşturur, bu yüzden float edilmiş çocukları saracak şekilde büyür. display: flow-root hiçbir şeyi kırpmadan aynısını yapar.
Altındaki position: sticky'yi bozar. Sticky bir çocuk en yakın kaydırma kapsayıcısına yapışır; o kapsayıcı kaymıyorsa hiçbir şey yapışmaz.
Absolute konumlandırılmış çocukları kırpar (taşan element aynı zamanda onların kapsayıcı bloğuysa), açılır menüler ve tooltip'ler dahil; çocukların kutu gölgelerini de kırpar.

Kaydırma çubuğunu gizlemek

scrollbar-width: none ile bir kutuyu kaydırılabilir tutup kaydırma çubuğunu gizleyebilirsin. Bunu az kullan: kaydırma çubuğu olmadan birçok okuyucu daha fazla içerik olduğunu fark etmez. scrollbar-gutter: stable ise tersini yapar: bir kaydırma çubuğu belirdiğinde içerik kaymasın diye çubuğun yerini ayırır.

Sık yapılan hatalar

Boyut sınırı olmadan taşma beklemek. height ya da max-height değeri olmayan bir kutu taşmak yerine büyür.
Yatay kaydırmayı "düzeltmek" için body üzerinde overflow: hidden. Bunun yerine fazla geniş olan elementi bul (çoğunlukla sabit bir width, uzun bir URL ya da kaydırma çubuğuyla birlikte 100vw).
white-space: nowrap olmadan ellipsis. Metin kırılır, bu yüzden yatayda hiçbir şey taşmaz ve üç nokta görünmez.
Dikey kaydırma çubuğu oluşturan overflow-x: hidden. clip kullan.
Kartı tarafından kesilen bir açılır menü. Kartın overflow: hidden değeri onu kırpar; overflow kuralını taşı ya da açılır menüyü dışarıda çiz.

Sıkça Sorulan Sorular

overflow: hidden ne işe yarar?

Elementin padding kutusuna sığmayan içeriği kaydırma çubuğu olmadan kırpar. Gizlenen kısma script ile ya da içindeki bir şeye odaklanarak yine de kaydırılabilir.

overflow auto ile scroll arasındaki fark nedir?

scroll içerik sığsa bile her zaman kaydırma çubuklarına yer ayırır. auto ise yalnızca içerik kutudan büyük olduğunda bir kaydırma çubuğu gösterir; genellikle istediğin budur.

Bir div nasıl kaydırılabilir yapılır?

Boyutunu sınırla ve kaydırmaya izin ver: max-height: 300px; overflow-y: auto;. Bir height ya da max-height sınırı olmadan div içeriğiyle büyür ve hiç taşmaz.

overflow-x: hidden neden dikey bir kaydırma çubuğu da ekliyor?

Bir eksen hidden, scroll ya da auto ise diğer eksendeki visible değeri auto olarak hesaplanır. Bunun yerine bir kaydırma kapsayıcısı oluşturmayan ve diğer ekseni görünür bırakan overflow-x: clip kullan.

Taşan metne üç nokta (...) nasıl eklenir?

Tek satır için genişliği sınırlı bir elemente: white-space: nowrap; overflow: hidden; text-overflow: ellipsis;. Birkaç satır için display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; kullan.

İlgili kavramlar