גלישה

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 41 מתוך 76.

ב-CSS, המאפיין overflow קובע מה קורה לתוכן שחורג מהתיבה של האלמנט. כאשר תוכן של אלמנט גדול מדי מכדי להתאים לרוחב ולגובה שצוינו, המאפיין overflow קובע אם לחתוך את התוכן, להוסיף פסי גלילה או להציג את התוכן החורג מחוץ לגבולות האלמנט.

הנה התחביר הבסיסי לשימוש במאפיין overflow:

selector {
    overflow: value;
}

value: התנהגות הגלישה הרצויה, שיכולה להיות אחת מהאפשרויות הבאות:

visible: זהו ערך ברירת המחדל. תוכן שגולש מוצג מחוץ לתיבה של הרכיב ועשוי לחפוף לרכיבים סמוכים.

hidden: תוכן שחורג נחתך, ושאר התוכן אינו גלוי.

scroll: מוסיף פסי גלילה (אופקי ואנכי) לאלמנט, ומאפשר למשתמשים לגלול בתוכן שגולש החוצה.

auto: הדפדפן קובע אם להוסיף פסי גלילה בהתאם לתוכן ולמקום הזמין. בדרך כלל, פסי גלילה מתווספים רק כשיש בהם צורך.

לדוגמה:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

בדוגמה הזו, לכל רכיבי <div> שרוחבם 200px וגובהם 100px יתווספו פסי גלילה כדי להציג תוכן שחורג מהגבולות.

אפשר גם לשלוט באופן עצמאי בהתנהגות הגלישה בכיוונים האופקי והאנכי באמצעות המאפיינים overflow-x ו-overflow-y:

.example {
    overflow-x: hidden; /* הסתר גלישה אופקית */
    overflow-y: scroll; /* הוסף פס גלילה אנכי */
}

אתגר

קל

נתון לך מסמך HTML עם חלוקה (<div>) שמכילה פסקה (<p>) עם טקסט ארוך. עליך להשתמש במאפיין overflow כדי לקבוע כיצד התוכן הגולש יוצג. פעל לפי השלבים הבאים:

כתוב כלל CSS שמכוון לרכיב <div>. הגדר את width ל־300px, את height ל־150px, ואת border ל־1px solid black.
הגדר את המאפיין overflow של <div> ל־scroll כדי להוסיף פסי גלילה לרכיב.

נסו בעצמכם

<html>
<head>
    <title>Overflow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>
        <p>This is a long text that will likely overflow its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>