css overflow overflow-x

תפריט ראשי

מבוא ל-CSSצבעים ב-CSSפונקציות CSSמחולל דוגמאות CSSטיפים וטריקים ב CSSאודות אתר סי.אס.אס. גייד

מאפייני CSS

accent-coloralignanimationappearanceaspect-ratiobackgroundblock-sizeborderbottomboxcaption-sidecaret-colorclearcolorcolumncolumnscursordirectiondisplayempty-cellsflexfloatfontgapgridheightinline-sizeinsetjustifyleftletter-spacingline-heightlistmarginmaxminmix-blend-modeobjectopacityoutlineoverflowoverflow-wrapoverflow-xoverflow-ypaddingperspectivepointer-eventsresizerightrotaterow-gapscalescrollbartab-sizetable-layouttexttoptransform-origintransition-delaytranslateunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthwordwriting-modez-index

✔️ overflow-x CSS Style Property

המאפיין overflow-x מגדיר הוספת פסי גלילה אופקיים תמיד או רק במידה והתוכן גדול מהאלמנט המכיל אותו

דוגמא: מגדיר איך להציג את התוכן של האלמנט, כאשר התוכן לא נכנס ברוחב האלנמנט וגולש לצדדים.

Demo Panel:
זהו מלל (טקסט) ארוך ארוך המאפשר להדגים מצב בו המלל הוא ארוך.
מצב בו אורך המלל הוא גדול נותן אפשרות להציג את הדוגמא בצורה טובה להבנת ההדגמה.
צוות האתר CSSGuide כתב את דוגמא זו על מנת להדגים בצורה טובה את הדוגמא.
דוגמא זו נכתבה על מנת לתת מענה לדוגמאות המצריכות מלל ארוך.
לפעמים בשביל להדגים בצורה הכי טובה יש לתת דוגמא עם הרבה מילים ושורות.
על מנת לכתוב מלל ארוך, צוות האתר השתמש במיטב הכלים.
חוץ ממללים ארוכים האתר CSSGuide נותן דוגמאות CSS למגוון מאפיינים.
CSS:
HTML:
Syntax:

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

Valid values:
  • visible, hidden, clip, scroll, auto, overlay, revert, revert-layer, unset, inherit, initial

Js Syntax: element.style.overflowX

תאימות דפדפנים

overflow-x
הערך שנבדקChromeFirefoxEdgeCOpera
scroll✔️✔️✔️✔️
visible✔️✔️✔️✔️
hidden✔️✔️✔️✔️
clip✔️✔️✔️✔️
auto✔️✔️✔️✔️
overlay✔️✔️✔️✔️
revert✔️✔️✔️✔️
revert-layer✔️✔️✔️✔️
unset✔️✔️✔️✔️
inherit✔️✔️✔️✔️
initial✔️✔️✔️✔️
אודות | הצהרת פרטיות | צור קשר