وثائق CSS قابلة للتشغيل: overflow في CSS

Q: ما الفرق بين overflow auto وscroll؟

تحجز scroll أشرطة التمرير دائمًا، حتى حين يتسع المحتوى. أما auto فتُظهر شريط التمرير فقط حين يكون المحتوى أكبر من الصندوق، وهذا ما تريده عادةً.

Q: كيف أجعل div قابلًا للتمرير؟

حدد حجمه واسمح بالتمرير: max-height: 300px; overflow-y: auto;. من دون حد للارتفاع أو max-height، يكبر الـ div مع محتواه ولا يفيض أبدًا.

Q: لماذا تضيف overflow-x: hidden شريط تمرير عموديًا أيضًا؟

إذا كان أحد المحورين hidden أو scroll أو auto، تُحسب القيمة visible على المحور الآخر على أنها auto. استخدم overflow-x: clip بدلًا من ذلك، فهي لا تنشئ حاوية تمرير وتترك المحور الآخر ظاهرًا.

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 نهاية السطر المقصوصة بـ «…». تحتاج إلى ثلاثة أمور معًا: عرض محدود، ونص لا يمكنه الالتفاف، وفائض مخفي:

<!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- يعمل في Chrome وFirefox وSafari. وقارئات الشاشة ما زالت تقرأ النص كاملًا، فلا تضيع الكلمات المقصوصة عليها.

الآثار الجانبية لـ overflow

ضبط overflow على أي قيمة غير visible أو clip يغيّر أكثر من القص:

يحتوي العناصر العائمة وهوامش الأبناء. يشكّل العنصر سياق تنسيق كتلي جديدًا، فيكبر ليحيط بأبنائه العائمين. وتفعل display: flow-root الشيء نفسه من دون قص أي شيء.
يُفسد position: sticky تحته. الابن اللاصق يلتصق بأقرب حاوية تمرير؛ وإن لم تكن تلك الحاوية تتمرر، لا يلتصق شيء.
يقص الأبناء ذوي الموضع المطلق (حين يكون العنصر الفائض كتلتهم الحاوية أيضًا)، بما فيها القوائم المنسدلة والتلميحات، ويقص ظلال الصناديق للأبناء أيضًا.

إخفاء شريط التمرير

يمكنك إبقاء الصندوق قابلًا للتمرير مع إخفاء شريطه عبر scrollbar-width: none. استخدم ذلك باعتدال: من دون شريط تمرير لا يدرك كثير من القراء أن هناك محتوى إضافيًا. وتؤدي scrollbar-gutter: stable المهمة المعاكسة: تحجز مساحة شريط التمرير كي لا يتحرك المحتوى حين يظهر الشريط.

أخطاء شائعة

توقع الفيض من دون حد للحجم. الصندوق الذي بلا height أو max-height يكبر بدل أن يفيض.
overflow: hidden على body «لإصلاح» التمرير الأفقي. ابحث بدلًا من ذلك عن العنصر العريض جدًا (غالبًا width ثابتة، أو رابط URL طويل، أو 100vw مع شريط تمرير).
علامة الحذف من دون white-space: nowrap. يلتف النص، فلا يفيض شيء أفقيًا ولا تظهر علامة الحذف.
overflow-x: hidden تنشئ شريط تمرير عموديًا. استخدم clip.
قائمة منسدلة تقصّها بطاقتها. تقصّها overflow: hidden الخاصة بالبطاقة؛ انقل قاعدة overflow أو اعرض القائمة خارج البطاقة.

الأسئلة الشائعة

ماذا تفعل overflow: hidden؟

تقص المحتوى الذي لا يتسع داخل صندوق حشو العنصر، من دون أشرطة تمرير. ما زال يمكن التمرير إلى الجزء المخفي عبر سكربت أو بالتركيز على شيء بداخله.

ما الفرق بين overflow auto وscroll؟

تحجز scroll أشرطة التمرير دائمًا، حتى حين يتسع المحتوى. أما auto فتُظهر شريط التمرير فقط حين يكون المحتوى أكبر من الصندوق، وهذا ما تريده عادةً.

كيف أجعل div قابلًا للتمرير؟

حدد حجمه واسمح بالتمرير: max-height: 300px; overflow-y: auto;. من دون حد للارتفاع أو max-height، يكبر الـ div مع محتواه ولا يفيض أبدًا.

لماذا تضيف overflow-x: hidden شريط تمرير عموديًا أيضًا؟

إذا كان أحد المحورين hidden أو scroll أو auto، تُحسب القيمة visible على المحور الآخر على أنها auto. استخدم overflow-x: clip بدلًا من ذلك، فهي لا تنشئ حاوية تمرير وتترك المحور الآخر ظاهرًا.

كيف أضيف علامة حذف (...) للنص الفائض؟

لسطر واحد: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; على عنصر محدود العرض. ولعدة أسطر استخدم display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

مفاهيم ذات صلة