יצירת תיבת עם טקסט גלילה באמצעות CSS ו- HTML

תיבת גלילה ב- HTML היא תיבה המוסיפה פסי גלילה לצד ימין ולתחתון כאשר תוכן הקופסה גדול ממידות הקופסה. במילים אחרות, אם יש לך תיבה שיכולה להתאים סביב 50 מילים, ויש לך טקסט של 200 מילים, תיבת גלילה HTML ישים סרגלי גלילה כדי לאפשר לך לראות את 150 מילים נוספות. ב- HTML רגיל זה פשוט לדחוף את הטקסט הנוסף מחוץ לקופסה.

הפיכת HTML לגלול הוא די קל. אתה רק צריך להגדיר את רוחב וגובה של אלמנט אתה רוצה לגלול ולאחר מכן להשתמש במאפיין גלישה CSS כדי להגדיר איך אתה רוצה את הגלילה להתרחש.

מה לעשות עם טקסט נוסף?

כאשר יש לך יותר טקסט מאשר יתאים שטח בפריסה שלך, יש לך כמה אפשרויות:

• לשכתב את הטקסט כך שהוא קצר יותר יתאים.
• אפשר לטקסט לזרום אל מעבר לגבולות ולקוות שהפריסה יכולה להגמיש כדי לתמוך בה.
• חותכים את הטקסט שבו הוא גולש.
• הוספת פסי גלילה (בדרך כלל אנכית לטקסט), כך שמרחב הגלילה יציג את הטקסט הנוסף.

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

HTML ו- CSS עבור זה יהיה:

ה

overflow: auto;

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

ניתן גם לנתק את הטקסט על ידי שינוי הצפת: אוטומטי; over overflow מוסתר אם אתה משאיר את הנכס overflow, הטקסט יהיה לשפוך את גבולות div.

אתה יכול להוסיף ברים גלילה יותר מאשר רק טקסט

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

בדוגמה זו, התמונה 400x509 נמצאת בתוך פיסקה בגודל 300x300.

טבלאות יכול ליהנות מגלילות ברים

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

הדרך הקלה ביותר היא בדיוק כמו עם תמונות וטקסט, רק להוסיף div סביב השולחן, להגדיר את רוחב וגובה של div, ולהוסיף את הנכס overflow:

….

שם	מכשיר טלפון
ג 'ניפר	502-5366

דבר אחד שקורה כאשר אתה עושה את זה הוא גלילה אופקי בדרך כלל מופיע כי הדפדפן מניח כי כרום של פסי הגלילה הוא חופף את הטבלה. ישנן דרכים רבות לתקן זאת משינוי רוחב הטבלה ואחרים. אבל האהוב עלי הוא פשוט לכבות את הגלילה האופקי עם המאפיין CSS 3

overflow-x

. רק תוסיף

overflow-x: מוסתר;

אל div, וזה יסיר את סרגל הגלילה האופקי. הקפד לבדוק זאת, שכן ייתכן שיש תוכן שנעלם.

תומך באמצעות תגיות TBODY עבור הצפת

תכונה אחת ממש נחמד של דפדפן פיירפוקס היא שאתה יכול להשתמש נכס overflow על טבלה טבלה פנימית כמו tbody ו thead או tfoot. זה אומר שאתה יכול להגדיר פסי גלילה על תוכן השולחן, ותאי הכותרת להישאר מעוגן מעליהם. זה עובד רק ב- Firefox, וזה רע מאוד, אבל זה תכונה נחמדה אם הקוראים שלך רק להשתמש ב- Firefox. עיין בדוגמה זו ב- Firefox כדי לראות למה אני מתכוון.

…

שם	מכשיר טלפון
ג 'ניפר	502-5366