دليل مرجعي لـ CSS

قواعد CSS (RULES)

مجملة الخاصيات في CSS

خصائص overflow-y في CSS3 خصائص التدفق CSS

طريقة استخدام خاصية overflow-x في CSS3 ومثال

يحدد خاصية overflow-x CSS كيفية التعامل مع تهميش المحتوى عند تجاوزه حدود منطقة المحتوى للعناصر من اليمين واليسار، سواء كان ذلك عن طريق قطع المحتوى أو استخدام شريط التمرير أو عرض المحتوى الزائد.

الجدول التالي يوضح استخدام هذه الخاصية و سجلات إصداراتها، بالإضافة إلى استخدام خاصية JavaScript في بناء الجملة اللفظية.

القيمة الافتراضية:	visible
يُستخدم ل:	حاوية بلوك، حاوية inline-block و flex
الوراثة:	لا
يمكنه الرسوم المتحركة:	لايرجى الرجوع إلى خصائص الرسوم المتحركة。
الإصدار:	ميزات CSS3 الجديدة
جملة JavaScript:	object.style.overflowX="scroll"

جملة استخدام overflow-x

جملة هذا الخصائص هي:

overflow-x:　visible　|　hidden　|　scroll　|　auto　|　initial　|　inherit

في المثال التالي، يتم عرض كيفية استخدام خاصية overflow-x.

مثال

　　div　{
　　　العرض:　400px;
　　　الارتفاع:　300px;
　　　overflow-x:　scroll;
　　}

اختبار لمعرفة‹/›

قيمة الخاصية

جدول التالي يصف قيم هذه الخاصية.

القيمة	الوصف
visible	لم يتم قطع المحتوى؛ سيتم عرضه خارج حجمة العنصر، لذا قد يتداخل مع محتوى آخر. هذا هو القيمة الافتراضية.
hidden	سيتم قطع محتوى العنصر الزائد، وسيكون المحتوى المتبقي غير مرئي.
scroll	سيتم قطع المحتوى الزائد مثل أنه مخفي، ولكن سيتم تقديم ميكانيكية التمرير للوصول إلى المحتوى الزائد.
auto	إذا كان المحتوى يتجاوز حجمة العنصر، سيقدم مسارًا للنظر في المحتوى المتبقي.
initial	اعتماد هذا الخصائص إلى قيمته الافتراضية.
inherit	إذا تم تحديد هذا، فإن العنصر المرتبط يستخدم نفس قيمة overflow-x للعنصر الأم.

متوافقية المتصفح

متوافقية متصفحات overflow-x، الأرقام في الجدول التالي تعبر عن إصدار أقل من المتصفح الذي يدعم هذه الخاصية؛ جميع المتصفحات الرئيسية يدعمون هذه الخاصية.

	Firefox 1.5 وما فوق Google Chrome1+ Internet Explorer 9+ Apple Safari 3+ Opera 9.5+

تحذير: لا يدعم إصدار Internet Explorer 7 وما قبل ذلك الخاصية overflow-x. يدعم إصدار Internet Explorer 8 هذه الخاصية، ولكن يتطلب Microsoft الخاصية المحددة
-ms-البدء (مثل -ms-overflow-x). مدعوم في إصدارات Internet Explorer 9 وما فوق.

قراءة المزيد

يرجى الرجوع إلى التعليمات التالية:CSS Overflow。

خصائص ذات صلة:overflow،overflow-y،clip،word-wrap。

خصائص overflow-y في CSS3 خصائص التدفق CSS