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

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

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

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

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

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

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

HTML ו- CSS לכך יהיו:

טקסט כאן... 

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

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

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

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

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

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

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

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

... 

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

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

Firefox תומך בשימוש בתגי TBODY לצורך הצפה

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

... NamePhoneJennifer502-5366. 

...