شرح الخاصية Overflow CSS | ستايلات CSS

 

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


 


 Although the phrase is nonsense, it does have a long history. The phrase has been used for several centuries by typographers to show the most distinctive features of their fonts. It is used because the letters involved and the letter spacing in those combinations reveal, at their best, the weight, design, and other important features of the typeface. During the 1500s, a printer adapted Cicero's text to develop a page of type samples. Since then, the Latin-like text has been the printing industry's standard for fake, or dummy, text.  Before electronic publishing, graphic 

 

تحتوي السمة overflow على القيم الأربع التالية: 

 ● visible - القيمة الافتراضية. لا يتم تكديس المحتوى الإضافي ويتجاوز المحتوى الإضافي المساحة المتاحة للعنصر ويتم عرضه خارج المربع الخاص بهذا العنصر.
 ● hidden - تم تعيين المحتوى الإضافي ولن يكون هذا المحتوى الإضافي مرئيًا للمستخدم.
 ● scroll - يتم ترتيب المحتوى الإضافي، ولكن يتم إضافة شريط تمرير إلى العنصر بحيث يمكن عرض المحتوى الإضافي عن طريق التمرير.
 ● auto - يتم إضافة محتوى إضافي ويتم إضافة شريط التنقل إلى العنصر إذا لزم الأمر.

overflow: visible 


بشكل افتراضي، تحتوي سمة overflow على قيمة visible، مما يعني أنه لا يتم فرز أي محتوى إضافي وعرضه خارج مربع العنصر:

يمكنك استخدام السمة overflow عندما تريد تحكمًا أفضل في تخطيط صفحة الويب. تحدد السمة overflow ما يجب أن يحدث إذا تجاوزت محتويات المربع.

div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}

overflow: hidden

عندما نقوم بتعيين سمة overflow على hidden، يتم فرز المحتوى الإضافي ولا يمكن عرضه للمستخدم:

يمكنك استخدام السمة overflow عندما تريد تحكمًا أفضل في تخطيط صفحة الويب. تحدد السمة overflow ما يجب أن يحدث إذا تجاوزت محتويات المربع.

 

div {
overflow: hidden;
}

overflow: scroll

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

يمكنك استخدام السمة overflow عندما تريد تحكمًا أفضل في تخطيط صفحة الويب. تحدد السمة overflow ما يجب أن يحدث إذا تجاوزت محتويات المربع.

 

div {
overflow: scroll;
}

overflow: auto

القيمة التلقائية تشبه إلى حد بعيد قيمة scroll. الاختلاف الوحيد هو أنه ستتم إضافة أشرطة التمرير إلى العنصر إذا لزم الأمر:

يمكنك استخدام السمة overflow عندما تريد تحكمًا أفضل في تخطيط صفحة 

div {
overflow: auto;
}

overflow-x و overflow-y

 ● يتم استخدام سمات overflow-x و overflow-y لتحديد ما إذا كان المحتوى الإضافي يتم ترتيبه في اتجاه واحد فقط (أفقيًا أو رأسيًا) أم لا.
  ● يحدد overflow-x ما يجب فعله بالمحتوى الإضافي على الحواف اليمنى واليسرى للعنصر.
  ● يحدد overflow-y ما يجب فعله بالمحتوى الإضافي في الحواف العلوية والسفلية للعنصر. 
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}



كلمات مفتاحية: