Word Wrap ב - CSS3

התכונה word-wrap ב - CSS3 שמשה בתחילה רק באינטרנט אקספלורר ובשלב מאוחר יותר הפכה להיות חלק מ - CSS3. תכונה זו מאפשרת למילים ארוכות "להישבר" בסוף השורה על מנת לשמור על רוחבו של האלמנט שבתוכו מוצג טקסט.

החדשות הטובות הן שכל הדפדפנים המובילים תומכים בתכונה זו ולכן אפשר כבר עתה להתחיל להשתמש וליהנות ממנה ללא חשש.

הצורה הכללית לשימוש ב - word-wrap

Element { word-wrap: normal/break-word; }

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

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

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

דוגמה לשימוש בתכונה word-wrap

בדוגמה הבאה נגדיר לטקסט בתוך האלמנט <p> כי במקרה שבסוף מילה תהיה מילה שאורכה יגרום לטקסט לגלוש אל מעבר לרוחב האלמנט שבתוכו היא מוצגת המילה הארוכה תישבר וחלקה יוצג בשורה הבאה:

p { word-wrap: break-word;}

את שני קטעי הטקסט הבאים הנמצאים בתוך אלמנט מסוג <p> הגדרנו לרוחב 200 פיקסלים. עבור הפסקה הימנית הגדרנו break-word עבור השמאלית לא הגדרנו דבר. כפי שאתם יכולים לראות הפסקה הימנית שמרה על רוחבה המקורי ושברה את המילה הארוכה שבתוכה ואילו המילה הארוכה שבפסקה השמאלית פשוט חרגה מגודל הפסקה שבתוכה היא נמצאת.

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

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


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