תיעוד CSS עם דוגמאות להרצה: Overflow

Q: מה ההבדל בין overflow auto ל-scroll?

scroll תמיד שומר מקום לפסי גלילה, גם כשהתוכן נכנס. auto מציג פס גלילה רק כשהתוכן גדול מהקופסה, וזה מה שרוצים בדרך כלל.

Q: איך הופכים div לנגלל?

הגבילו את הגודל שלו ואפשרו גלילה: max-height: 300px; overflow-y: auto;. בלי מגבלת height או max-height, ה-div גדל עם התוכן שלו ואף פעם לא גולש.

Q: למה overflow-x: hidden מוסיף גם פס גלילה אנכי?

אם ציר אחד הוא hidden, scroll או auto, ערך visible בציר השני מחושב כ-auto. השתמשו במקום זאת ב-overflow-x: clip, שלא יוצר מיכל גלילה ומשאיר את הציר השני visible.

Q: איך מוסיפים שלוש נקודות (...) לטקסט שגולש?

לשורה אחת: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; על אלמנט עם רוחב מוגבל. לכמה שורות, השתמשו ב-display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

מה overflow עושה

כשתוכן גדול מהקופסה שלו (גובה קבוע, מילה ארוכה, טבלה רחבה), הוא גולש. המאפיין overflow קובע מה קורה לעודף:

<!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>

ערך	מה רואים	מיכל גלילה
`visible` (ברירת מחדל)	התוכן נשפך מחוץ לקופסה וחופף את מה שבא אחריו	לא
`hidden`	נחתך בקצה הריפוד, בלי פסי גלילה (סקריפט עדיין יכול לגלול אותו)	כן
`clip`	נחתך, ואין גלילה בכלל, גם לא בסקריפט	לא
`scroll`	תמיד מציג פסי גלילה, גם אם התוכן נכנס	כן
`auto`	פסי גלילה רק כשהתוכן לא נכנס	כן

ב-macOS ובטלפונים פסי הגלילה מונחים מעל התוכן ונעלמים בהדרגה, כך ש-scroll ו-auto עשויים להיראות אותו דבר עד שגוללים.

יצירת קופסה נגללת

קופסה גולשת רק אם משהו מגביל את הגודל שלה. height או max-height, יחד עם overflow-y: auto, הופכים רשימה ארוכה ללוח נגלל:

<!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>

max-height עדיף כאן על height: רשימה קצרה נשארת קצרה, ורק רשימה ארוכה נגללת. אזור נגלל שאין בתוכו תוכן שאפשר להתמקד בו צריך לקבל tabindex="0" כדי שגם משתמשי מקלדת יוכלו לגלול אותו.

overflow-x ו-overflow-y

אפשר להגדיר את שני הצירים בנפרד. השימוש הנפוץ הוא טבלה רחבה שנגללת הצידה בתוך המיכל שלה במקום להרחיב את כל הדף:

<!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>

כלל אחד שכדאי לזכור: אם ציר אחד הוא hidden, scroll או auto, ערך visible בציר השני הופך ל-auto. לכן overflow-x: hidden לבדו יכול לתת לכם פס גלילה אנכי לא צפוי. ל-overflow-x: clip אין את ההשפעה הזאת:

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

חיתוך טקסט עם שלוש נקודות

text-overflow: ellipsis מחליף את הסוף החתוך של שורה ב-"…". הוא צריך שלושה דברים יחד: רוחב מוגבל, טקסט שלא יכול להישבר לשורה חדשה ו-overflow מוסתר:

<!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>

ה-line clamp עם הקידומת -webkit- עובד ב-Chrome, Firefox ו-Safari. קוראי מסך עדיין קוראים את הטקסט המלא, כך שהמילים החתוכות לא הולכות לאיבוד בשבילם.

תופעות לוואי של overflow

הגדרה של overflow לכל ערך אחר מ-visible או clip משנה יותר מאשר חיתוך:

הוא מכיל floats ו-margins של ילדים. האלמנט יוצר block formatting context חדש, ולכן הוא גדל כדי לעטוף ילדים עם float. display: flow-root עושה אותו דבר בלי לחתוך כלום.
הוא שובר את position: sticky מתחתיו. ילד sticky נצמד למיכל הגלילה הקרוב ביותר; אם המיכל הזה לא נגלל, שום דבר לא נצמד.
הוא חותך ילדים עם מיקום absolute (כשהאלמנט הגולש הוא גם הבלוק המכיל שלהם), כולל תפריטים נפתחים ו-tooltips, והוא חותך גם צללים של ילדים.

הסתרת פס הגלילה

אפשר להשאיר קופסה נגללת ולהסתיר את פס הגלילה שלה עם scrollbar-width: none. השתמשו בזה במשורה: בלי פס גלילה, קוראים רבים לא מבינים שיש עוד תוכן. scrollbar-gutter: stable עושה את העבודה ההפוכה: הוא שומר את המקום של פס הגלילה כדי שהתוכן לא יזוז כשפס גלילה מופיע.

טעויות נפוצות

לצפות לגלישה בלי מגבלת גודל. קופסה בלי height או max-height גדלה במקום לגלוש.
overflow: hidden על body כדי "לתקן" גלילה אופקית. מצאו במקום זאת את האלמנט שרחב מדי (לרוב width קבוע, כתובת URL ארוכה, או 100vw עם פס גלילה).
Ellipsis בלי white-space: nowrap. הטקסט נשבר לשורות, כך ששום דבר לא גולש אופקית ולא מופיעות שלוש נקודות.
overflow-x: hidden שיוצר פס גלילה אנכי. השתמשו ב-clip.
תפריט נפתח שנחתך על ידי הכרטיס שלו. ה-overflow: hidden של הכרטיס חותך אותו; העבירו את כלל ה-overflow או הציגו את התפריט מחוץ לכרטיס.

שאלות נפוצות

מה overflow: hidden עושה?

הוא חותך תוכן שלא נכנס בתוך קופסת הריפוד של האלמנט, בלי פסי גלילה. עדיין אפשר לגלול אל החלק המוסתר בעזרת סקריפט או על ידי פוקוס על משהו שבתוכו.

מה ההבדל בין overflow auto ל-scroll?

scroll תמיד שומר מקום לפסי גלילה, גם כשהתוכן נכנס. auto מציג פס גלילה רק כשהתוכן גדול מהקופסה, וזה מה שרוצים בדרך כלל.

איך הופכים div לנגלל?

הגבילו את הגודל שלו ואפשרו גלילה: max-height: 300px; overflow-y: auto;. בלי מגבלת height או max-height, ה-div גדל עם התוכן שלו ואף פעם לא גולש.

למה overflow-x: hidden מוסיף גם פס גלילה אנכי?

אם ציר אחד הוא hidden, scroll או auto, ערך visible בציר השני מחושב כ-auto. השתמשו במקום זאת ב-overflow-x: clip, שלא יוצר מיכל גלילה ומשאיר את הציר השני visible.

איך מוסיפים שלוש נקודות (...) לטקסט שגולש?

לשורה אחת: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; על אלמנט עם רוחב מוגבל. לכמה שורות, השתמשו ב-display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

מושגים קשורים