שליטה על גלישת טקסט (Text Overflow)

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

הצורה הכללית לשימוש ב - text-overflow

Element { text-overflow: clip/ellipsis; }

כפי שניתן ללמוד מן הצורה הכללית לתכונה יש להוסיף לה את אחת משתי המילים השמורות:

 clip - חותך את הטקסט בדיוק בנקודה שבה הוא מגיע לסוף השורה;

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

דוגמה לשימוש בתכונה text-overflow

בדוגמה הבאה נגדיר לטקסט בתוך האלמנט <h3> כי במקרה שטקסט יגלוש ממנו הוא יוסתר. כמו כן נגדיר nowrap לתכונה white-space כדי למנוע מהטקסט לגלוש לשורה הבאה והכי חשוב נגדיר לתכונה text-overflow את הערך ellipsis כך שבסוף השורה יתווספו שלוש נקודות לטקסט.

h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

התוצאה במקרה של הקוד שלמעלה תיראה למשל כך:

Ellipsis Demo

הטקסט המלא שנכתב בתוך התג h3 היה: "גלישת טקסט (Text-Overflow) בשפת CSS3. אולם טקסט זה אמור היה לגלוש לשורה שנייה ולכן הטקסט נקטע לקראת סוף השורה והתווספו לו שלוש נקודות.

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש