توجد اخطاء حاليا في جوجل مشرفي الموقع

شرح الخاصية overflow وكيفية استخدامها

شرح بسيط لخاصية overflow  وكيفية استخدامها وكيف تفعل في المحتوي الموجود 

شرح الخاص

شرح الخاصية overflow 

قد يهمك هذا المقال :-  شرح خاصية ال Text Shadow شرح عمل ظلال علي النص 
السلام عليكم متابعينا في درس برمجي جديد ،الخاصية overflow هي خاصية من خواص CSS تستخدم عندما يكون المحتوي كبير ولا يتوافق مع المنطقة المعينة التي فيها هذا المحتوي , يأتي دور خاصية Overflow والقيم الخاصه به .

القيمة visible

  overflow: visible; code-box
هذه القيمة لا تقوم بقص المتبقي من المحتوي ولكن يتم عرضه خارج منطقة العنصر بشكل تلقائي وهذه الصورة مثال للقيمة visible 

كما ترون في هذ الصورة المحتوي كبير جدا وعندما وضعنا القيمة Visible  قام بشكل تلقائي بعرض باقي المحتوي المتبقي خارج العنصر وخارج المنطقة المعينة . 

القيمة hidden 

overflow: hidden; code-box
هذه القيمة من اسمها يوضح ان هذه القيمة ستقوم باخفاء المحتوي المتبقي وسيكون غير مرئي لك وهذه صورة توضح القيمة hidden 

كما ترون في الصورة المحتوي له بقية ولكن قامت القيمة باقتصاص باقي المحتوي وقامت باخفاءه 

القيمة scroll 

  overflow: scroll; code-box
هذه القيمة تقوم بقص المحتوي الزائد ولكن تضيف شريط تمرير لمشاهدة باقي المحتوي وفي هذه الخاصية شريط التمرير والصورة خير دليل لتوضح لك هذه القيمة 

كما ترون في الصورة يوجد شريط تمرير لمساعدتك في مشاهدة باقي المحتوي الذي تم اقتصاصه 

القيمة auto 

overflow: auto; code-box
هذه القيمة  تشبه الي حد كبير لقيمة scroll ولكن الفرق هنا أن شريط التمرير يتم اضافته عند الضرورة فقط 

توجد ايضا قيمتين في خاصية Overflow وهم 
:- x-overflow تتحكم في الحواف اليمنى والحواف اليسري للمحتوي 
:- y-overflow تتحكم في الحواف العلوية والحواف السفلية للمحتوي 
نتمني ان يكون الموضوع مفيد لك، ان واجهتك اي مشكلة في هذا الموضوع او مشكلة عامة في موقعك قم بكتابتها في صفحة الاستشارة المجانية او في اي موضوع وسيقوم بالرد عليك من احد فريق الموقع او مني , او اذا كنت تريد شرح معين عن  أي شي في بلوجر او SEO لاتتردد في كتابته في التعليقات 

المصادر :-

w3schools -CSS Layout - Overflow